Please I'm having issues styling the contact page . I'll love to change Address, email and phone number colours to white. See Screenshot,
I've tried inspecting element, but can't find the actual file to modify.
You can't find the file is because it's in-between script tags. Can you not do it using the WYSIWYG controls?
If you want to do it with CSS, put the following in your theme's custom.css or your child themes styles.css (Or if your theme has theme options, it may be in there):
.page-template-contact .info-strip .info-block p,
.page-template-contact .info-strip .info-block a {
color: #fff !important;
}
This will apply it only to those blocks on the contact page. The important also prevents it being overridden by inline CSS added by WYSIWYG editors, so bare this in mind when you want to change it 2 months down the line :)
.page-template-contact .info-strip .info-block p,
.page-template-contact .info-strip .info-block a {
color: #fff !important;
}
Would you please add above code in your style.css ?
Related
I have added styling to my anchor tag and have made the text-decoration to none to the entire website. But I want the blog section of my website to underline the links.
I'm using the code snippet plugin in wordpress as I don't have direct access to the files.
And this is the code that I'm using.
add_action( 'wp_head', function () { ?>
<style>
a:link {
text-decoration: underline;
}
</style>
<?php } );
The problem is that this PHP code gets applied to my entire website which is not what I want. I only want this to be applied to the body section of the blog content.
I would love to have someone assist me with this problem.
Thank you.
This is a job for CSS (inside a <style> tag) with specific selectors. Your CSS selector, a:link is very non-specific. That is, the browser uses it whenever it sees an anchor <a> tag.
You need the browser to use it only on some anchor tags. So, you use a more specific selector.
Try using this CSS to style the links within articles in your posts and pages.
div.site-content main article a:link {
text-decoration: underline;
}
It affects anchor tags only in html nested inside a hierarchy of HTML elements. Most themes use these elements.
If you want to style just posts (not pages), put article.post in the selector instead.
div.site-content main article.post a:link {
text-decoration: underline;
}
You can add CSS to your site without the Code Snippets plugin, and without php code. Go to Appearance -> Customize. At the bottom of the left column choose Additional CSS. Then put in the CSS you need.
If you want to be able to figure this out for yourself, right-click in the browser element you want to style and choose Inspect. You'll see the HTML for that element along with the elements it's nested inside.
Additional CSS is a good setup because it survives plugin updates, and because you don't neet to hack any php to get it to work.
On my website on all pages except the home page, here's an example: http://www.pantsdownrecords.com/discography/, the issue I have been having is with the custom header. In the customer header div element where it says: “div class=”custom-header” and right after this is a style tag adding a margin-bottom of 82px. I have looked in all of the template pages and even the few plugins I am running right now, and cannot find where this style tag is being added. And since it is a style tag I can’t override it with CSS since style tags take precedence. Since this margin bottom is there, on some pages I can’t even see the footer because the page can’t scroll to the bottom.
Could somebody help point me in the right direction of where this issue is coming from?
All help would be greatly appreciated,
Thanks
It's in this file - http://www.pantsdownrecords.com/wp-content/themes/twentyseventeen/assets/js/global.js?ver=1.0
Under the adjustScrollClass() function. And you can overwrite an inline style with !important in your CSS. You should use that feature sparingly, but it works if you need to overwrite an inline style.
You could open more files in notepad++ and use search with Find in all open documents if you want to find a specific string.
You could change this with CSS by using !important for the specific element or check with javascript or jQuery for pages where you have the problem and set the specific styles.
CSS:
.custom-header { margin-bottom: 0px !important")
JavaScript:
var winURL = window.location.href;
if(winURL == "http://www.pantsdownrecords.com/artists/") {
document.getElemetsByClassName("custom-header")[0].style.margin = "0px 0px 0px 0px";
}
jQuery:
var winURL = window.location.href;
if(winURL.indexOf("artist")) {
$(".custom-header").css("margin","0px");
}
So my problem is awkward, I have a Wordpress website on which I can't overwrite CSS. On which I've added a google font.
The problem is that sometimes when I want to overwrite a CSS using either a id and class selector, or embeding style into html, the font get's always overwritten.
How to overwrite css (font-face) which is coded in css in style_options.php which generates options.css.
Did anybody solve this problem already?
Thank you for answers!
Strictly speaking, if you want your attribute not to get overwritten, you need to use !important like so:
p {
color: blue!important;
}
#myid {
color: red;
}
<p id="myid">This text is blue.</p>
But i think you should check in your theme's option, there's gotta be some way to edit within wordpress such things as the font. (thanks Vineet Kaushik for pointing that out)
I am in the process of creating my first wordpress template.
I have a top nav that is however pushed down by
html {
margin-top: 32px !important;
}
I found that this particular style is in the admin-bar.php file that came when I downloaded wordpress on my local machine.
I could just take the lines out of that file but that doesn't do the job because I want to create a template that can be bundled and uploaded to anyones wordpress.
Is there a way I can overwrite the above styling through my own template?
I hope this makes sense
Thank you so much
With css you can just do the following
html {
margin-top: 0px !important;
}
and it'll automatically override it.
But I can't tell exactly what you are trying to do.
You could enqueue a css file to the bottom of the page and overwrite the above with:
html{
margin-top: 0px !important;
}
It has to be the last CSS file to be linked.
I'm adding this for future reference because previous answers respond to the CSS question, but the issue here is not the CSS part, in fact html { margin-top: 32px !important; } is added by Wordpress for the toolbar.
As the reference says:
Note: If you have turned the Toolbar on in your profile settings, but still don't see it on the front end of your site, it may be that your theme does not call wp_footer() in its footer.php file, or the Toolbar may be disabled by a plugin.
I have wordpress sidebar with:
<h3 class="widget-title">TITLE OF SIDEBAR</h3>
and I need show small icon before "TITLE OF SIDEBAR. Can I do with CSS?
Or I must manually add image into code? like:
<h3 class="widget-title"><img src="">TITLE OF SIDEBAR</h3>
Pseudo elements will do what you want. Using the :before pseudo element, your CSS would look like this:
h3.widget-title:before {
content: url('/path/to/image');
}
This will place an image before the text content of the <h3>, however this won't change the DOM at all which is important to note.
A good explanation of how pseudo elements work can be found here, on CSS Tricks.
If your image is 10px wide, you could try this:
.widget-title {
background: url(smallicon.png) left top no-repeat;
padding-left: 10px;
}
Keep your h3 tag without including img tag, and do the following:
h3.widget-title {
position: relative;
padding-left: <width of the icon image>;
}
h3.widget-title:before {
content: '';
width: <width value>;
height: <height value>;
position: absolute;
left: 0;
display: block;
background: url(<path of the icon image>) no-repeat;
}
.widget-title:before {
content: url(path/to/image.png);
}
You can find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/content.
h3:before {
content: url('https://www.google.com/images/srpr/logo4w.png')
}
Sample http://jsfiddle.net/KCXVM/
Yes, you can do it in CSS.
Simply use the :before pseudo-selector, like this:
widget-title:before {
content:url('imagename.png');
}
Or, of course, use h3:before { ... } for it to apply to all h3 elements.
Here's a working example for you
Browser compatibility: This works in all common browsers, except IE7 or earlier.
Why not simply apply the image as a background?
.widget-title {
background: url(...) no-repeat 50% 0;
padding-left: 20px;
}
So, at first, I thought a <span> thing would work.
Then, I tried this, and it worked seamlessly:
h3:before{
content: url('your url');
}
You can add icon before each h3 heading in CSS by following these ways below (via OIW Blog):
- Use Glyphicons of Bootstrap
If you are using Bootstrap then you can use Glyphicons to add icons to the desired title or text.
Bootstrap contains a diverse set of icons, to pick up a suitable icon you can take a look at here: https://getbootstrap.com/docs/3.3/components/. Once choosing a desired icon, adding it to theme is a piece of cake. You just need to add the card after the location that you want your icon to be displayed
<span class="glyphicon glyphicon-ok"></span>
Notice that the icon I added is “ok” so its class shall be “glyphicon-ok”. Each icon (in the list I mentioned above) is compatible to a different class.
- Use icons of existing Cheatsheet of the currently used Font or third party
If your website don’t use Bootstrap or the current set of icons of Bootstrap doesn’t meet your need (despite containing a lot) (Glyphicons of bootstrap has displaying errors on IE10 of Window Phone OS). After that you can check what font of the website you are using is and find out if it has an icons Cheatsheet library or not. For example: Elusiveicons, Fontisto, Material Design… are some of the fonts that have icons Cheatsheet which are for immediate use.
If your currently used font of the website has Icons Cheatsheet then you can have a set of icons of the third party. Here I would like to introduce “Font Awesome Icons”. This is a good-looking and popular set of icons.
To use this set of cons, you need to add this code to the head section in your website:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
– After adding CSS, you can use this code to put in the HTML which shows icons (you can apply this method to the part you use Cheatsheet of the font as mentioned above. Some fonts have unique way of using)
<i class="fa fa-edit"></i>
– If you don’t want the code in the HTML, you can just use CSS. With CSS you need to find the Class or ID of the part that displays icon and after that use the below CSS code to display it. Here I display the EDIT icon of the third party “Font Awesome Icons” before (::before) the title, along with 2 properties of padding-right and font-style (you can also display it after the title by using after property):
span.last-updated-time::before {
font-family: "FontAwesome";
content: "\f044";
padding-right: 5px;
font-style: normal;
}
Notice: the code of content is hexadecimal code. You can find and replace it with the code of the currently used icon. With “Font Awesome Icons” you can find it here: https://fontawesome.com/cheatsheet