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;
}
Related
I'm creating PDF from HTML using weasyprint. I have a content that has dynamic number of pages.
I can start a new page after it with style="page-break-before: always;".
How do I make this new page yellow?
I would use #page :nth(3) { background: yellow; } if I new it was third page. But I don't know the length of the content before.
Maybe something like <page> could be styled?
Thanks!
Found in samples! You can use page css property to name target page.
#page mypagename{
background: yellow;
}
#element-on-styled-page{
page: mypagename;
}
This is a wordpress website - https://smecollaborative.org/
Down the page there is a section pulling from the Events Calendar. Each Event has a featured image. You can use CSS to hide the featured image of each image, but the challenge is using the Fusion Builder element, the featured image is replaced with a 'placeholder' image off a calendar, and I can't get that thing hidden.
Here are the two snippets I've tried:
.single-tribe_events .page-header-image-single {
display: none;
}
.tribe-events-event-image img {
display:none!important;
}
.fusion-events-shortcode .tribe-events-event-image {
height: auto !important;
}
The 2 snippets you tried are wrong because:
snippet 1. is targeting the header image on the tribe event single page.
snippet 2. is targeting an img tag which does not exist in this case.
You should target the parent item to also hide the clickable link to it:
.fusion-events-post div.fusion-events-thumbnail {
display: none;
}
I added the extra div to the thumbnail selector to override the standard display: block; without having to use !important
Or, in case you only want to hide it if the image is missing you can do:
.fusion-events-post .fusion-events-thumbnail span {
display: none;
}
This one will only target the placeholder in case it is present
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
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';
}
I have a link that is in a div, and the div has an id of sidebar-left. I want to make it a different color when the link has the class current_page_item. I have other links on the page (that are not in the div) that I do not want this formatting to apply to.
I have tried several different versions of the following code with no luck:
#sidebar-left.current_page_item a {
color: #00b0f0;
}
Does anyone know what I am doing wrong?
Thanks.
Try:
#sidebar-left .current_page_item a {
color: #00b0f0;
}