- This topic has 6 replies, 3 voices, and was last updated 9 years, 9 months ago by
Tom.
-
AuthorPosts
-
July 24, 2015 at 6:24 am #123278
kane
Hi,
adding additonal CSS is very tricky.
I’m usig a child theme. Sometimes it works to add CSS in the Style.css of child theme. But sometimes it doesnt work.
Why?
I dont want to use additional Plugin (add custom css), because i hate 3 Party Plugins. 🙂
I would like to add directly in Style. css
Thanks
July 24, 2015 at 9:16 am #123315Tom
Lead DeveloperLead DeveloperHi there,
Adding CSS shouldn’t be tricky at all – if the CSS you’re adding to your child theme is valid, it should work 100%.
The child theme style.css file is even loaded after the parent stylesheet and the CSS generated by the Customizer, so it should take priority over those other styles.
One thing that can make your child theme CSS problematic is importing the parent stylesheet into it.
More on that here: http://generatepress.com/knowledgebase/child-theme-working/
July 24, 2015 at 9:23 am #123318bdbrown
Hi kane. Couple of additional thoughts:
1. The child theme css is being applied but it is being overridden by the parent css which has a higher specificity.
2. The selectors used in the css don’t match the actual element you’re trying to target.If possible please post a link to your site and give an example of a child theme style that’s not working.
July 26, 2015 at 6:05 am #123721kane
Hi,
i’m 100 % Sure, it doesnt work.
This html:
<div class="wrapperprodukt1"> <div class="onebild"> <center><a href="{$AmazonUrl}" target="_blank" rel="nofollow"><img src="{$MediumImageUrl}" width="{$MediumImageWidth}" height="{$MediumImageHeight}" border="0" style="border: 0;" title="{$Title}"/></a></center> </div> <div class="twotext"> <p style="padding-top: 15px; margin-bottom: 6px;"><a href="{$AmazonUrl}" target="_blank" rel="nofollow" title="{$Title}">{$Title}</a></p> <p style="padding-bottom: 0px; margin-bottom: 3px;"><img src="http://domain.com/{$AverageRating}.png" title="{$AverageRating} von 5 Sternen"> ({$TotalReviews} Kundenrezensionen)</p> <p style="padding-bottom: 0px; margin-bottom: 0;"><strong>Erhältlich ab:</strong> <span style="color: #238d1a; font-weight: bold;">{$AmazonPriceFormatted}</span></p> </div> <div style="clear: both;"></div> </div>
And this Css:
.wrapperprodukt1{ border: 1px solid #e8e8e8; margin-bottom: 18px; overflow:hidden;} .onebild { float:left; margin-right:20px; margin-top: 12px; width:200px;} .twotext { background-color: white; overflow:hidden; margin:10px; min-height:120px; padding-top: 11px;} @media screen and (max-width: 550px) { .onebild { float: none; margin-right:0; width:auto; border:0; } }
doesnt workt with child theme.
When adding in simple custom css plugin it works.
What is the problem with the theme`?
Thx
July 26, 2015 at 8:10 am #123740Tom
Lead DeveloperLead DeveloperCan you try adding that CSS above everything else in the child theme? If there’s an error anywhere in your child theme CSS above the mentioned CSS, it stops reading everything below the error.
Adding the above to the top of the file will tell us if the other CSS is valid or not.
July 26, 2015 at 1:00 pm #123837kane
Hi Tom,
thank you. this solution works.
🙂
July 26, 2015 at 6:36 pm #123914Tom
Lead DeveloperLead DeveloperCool – you can use a service like this to find the error in your CSS: https://jigsaw.w3.org/css-validator/
-
AuthorPosts
- You must be logged in to reply to this topic.