I have added a title color for each category that is displayed on the posts. This is how I want it to be displayed and this is the way it displays
It works fine for one category page https://everythingstudent.co.uk/category/discounts/, but on the others it doesn't https://everythingstudent.co.uk/category/sponsored/ - The section after In case you missed it.
I don't understand why it doesn't respect the CSS assigned. It bugs me out.
You have made small mistake. just replace your css with below css. same class in body and article tag so we need to add article tag with class name so it does not conflict with body tag :)
article.category-discounts .category_es_title {
background-color: #0072bc!important;
}
article.category-anothercat .category_es_title {
background-color: #f8ac87!important;
}
article.category-jackiscool .category_es_title {
background-color: #75d3f6!important;
}
article.category-sponsored .category_es_title {
background-color: #00a651!important;
}
article.category-student-life .category_es_title {
background-color: #ff1744!important;
}
Where is your CSS typed? did you do it manually or through a front-end editor?
In my experience, a lot of times it's something as simple as a theme compatibility issue so you may have to go directly into the source code for the theme itself.
Let me know some details & I should be able to elaborate more
Related
I'm trying to address flex-control-nav, flex-control-paging and flex-direction-nav - but only, when they're within fusion-recent-posts. Tinkering since hours but haven't found a solution yet, that doesn't also affects other sliders.
Hoping somebody here might be able to help me out?
In regular CSS, here it is:
.fusion-recent-posts .flex-control-nav {
// your styles
}
.fusion-recent-posts .flex-control-paging {
// your styles
}
.fusion-recent-posts .flex-direction-nav {
// your styles
}
I have tried to search but am not sure if I am posing the question right.
I applied the following css to my site:
a[target='_blank']::after {
content: '\29C9';
}
This means that all external links will get the icon attached to it. So far, so good, it works as expected.
There are some situations though where I do not want this to happen, like in social share buttons. How can I exclude some classes?
Like when the link appears in a div with class 'socialbutton'?
PS I cannot add other style to these buttons (WordPress website and generated code)
You can overwrite this css code by adding new css to the class.
Example you can overcome this:
a[target='_blank']::after {
content: '\29C9';
}
By doing this:
.socialbutton::after {
content: '\fff' !important;
}
You can use the :not() selector:
a[target='_blank']:not(.social)::after {
content: '\29C9';
}
Website: http://www.otislandscapedesign.com/
I am trying to remove the website title from the following selected pages/posts using id: category-portfolio, clients, about, contact.
I've tried the following css code unsucessfully:
.postid-576 .gk-logo-text.inverse > span { display: none; }
What am I doing wrong and how do I resolve this?
On the body tag, you'll see a class containing the page type (page, post, category) and its ID. For example on the Clients page, the class is .page-id-576
So for that specific page, the CSS that would hide the title is:
.page-id-576 .gk-logo-text.inverse > span {
display: none;
}
You would need to do the same for all pages, just look for the page type+ID class on the body tag of each page.
Your code is correct, you just need to add the !important keyword to override the existing style declaration in the stylesheet. Here is your final code:
.postid-576 .gk-logo-text.inverse > span {
display: none !important;
}
According to this blog post, it should be possible to style the ToolbarSearch by customizing the UIIDs ToolbarSearch,TextFieldSearch and `TextHintSearch.
In my CSS File it looks like this:
ToolbarSearch {
color: white;
height:30mm;
width:30mm;
}
TextHintSearch {
color: white;
height:30mm;
width:30mm;
}
TextFieldSearch {
color: white;
height:30mm;
width:30mm;
}
The main thing I want to achieve is a white Search Button, Text, X-Button and Hint.
In the blog post above, it looks right, except the textfieldsearch and -hint:
But in my application it looks like this:
The buttons are in the wrong color. What am I doing wrong?
Notice:
This is how I add it
this.getToolbar().addSearchCommand(e -> {
//TODO search
});
(The algorythm is not implemented yet)
I don't use the CSS plugin so I'm not really sure how this maps there but you need to override the selected/pressed & unselected styles.
I'd like to know if there's a way to apply the same styles to IDs that start with the same workds.
For example, I have #youtube_gallery_item_1, #youtube_gallery_item_2,....and the number keeps increasing, so I can't add a new ID every time I add a new item. FYI, I'm working with Wordpress and YouTube SiimpleGallery plugin.
I'd appreciate your help!
The "starts with" selector in CSS3.
div[id^=youtube_gallery_item] {
}
Note that this doesn't work in IE8 and below.
What would be a better idea would be to assign all of your #youtube_gallery_items a class, and then assign styles to that class. I'm sure that the plugin that you're using is doing this. Look at the source code, and if you see that they all have the same class, use:
.name-of-the-class {
}
You can use an attribute selector:
[id^="youtube_gallery_item"] {
color: skyblue;
}
http://jsfiddle.net/p9Ya8/
I would suggest adding a class
.youtube_gallery_item {
background: ;
width: ;
...
}
Its compatible with all browsers and is the easiest way to get around.
<div id="youtube_gallery_item_1" class="youtube_gallery_item"></div>
<div id="youtube_gallery_item_2" class="youtube_gallery_item"></div>
<div id="youtube_gallery_item_3" class="youtube_gallery_item"></div>