Custom CSS Dyad Theme
-
Hi,
I would like to change the color of the header from white to pink. I already tried but only the color background just under the title menu changes, not all the header color.
Furthermore, how can I put the social icons under each of my articles in bigger and in different color ?
The blog I need help with is : http://bloglucette.com
Many thanks !
The blog I need help with is: (visible only to logged in users)
-
Hi there,
You can change the header’s color by going to Appearance > Customize > CSS (delete all the text in that window, unless you already have custom CSS) and paste the following custom CSS to change the header color to pink:
.site-banner a
{
color: #FF69B4 !important;
}The below CSS will change the size of the share buttons:
.sd-social-icon .sd-content ul li[class*=’share-‘] a, .sd-social-icon .sd-content ul li[class*=’share-‘] a:hover
{
padding: 25px;
}If you want to customize more, please write back with the exact changes and I’ll do my best to help you,
Take care,
Onur
-
Hi Onur,
Thank you for your help !
Concerning the header color, this CSS custom doesn’t change it. It changes the color of the title of my “featured” post.
However, I put exactly what you said… -
Hello again,
I apologize for providing the incorrect CSS, I was only able to see the white color of the text. In order to make sure I understand correctly what you’d like to change, could you tell me if you want to change the background color of the header where the site title “LE BLOG DE LUCETTE” is written?
If you would like to change that area the custom CSS codes to use would be:
.site-header, .is-scrolled .site-header, .home .site-header, .blog .site-header { background: rgba(255, 0, 144, 0.5) none repeat scroll 0% 0%; }If you would like to change another element, please let me know and I’d be happy to help you further.
Happy Blogging,
Onur
-
Hi Onur,
That is great, thanks !
I still have one last question :
You explained me how to change the size of the share buttons.
Do you know if it is possible to change also the size of the icon inside the button ? Because when I put the button bigger, the icon is not bigger.And if it is possible to change also the color of these buttons (to have only black and white buttons) ?
Many thanks
Take care,
Clementine
-
Hello again,
In order to increase the sizes of all icons inside the buttons, you can use the below CSS code:
.sd-content a::before { font-size: 32px !important; }1 thing to note however is that this will also increase the size of the buttons as well so you may have to play with the values to see what fits you best.
Thank you,
Onur
-
Hi,
Is it possible to remove the featured image on just blog posts? It takes up too much space on the left? Which CSS element & what code to modify?
TIA -
@vasunthara, see what you think with this. Add it at the very bottom of your custom CSS.
.is-singular .entry-media { display: none; } @media screen and (min-width: 960px) { .is-singular:not(.home) .site-inner { width: 100% !important; } .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header, .has-post-thumbnail .entry-meta .cat-links { position: relative; background: transparent; color: #000 !important; width: 100%; text-align: center; } .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header a, .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header h1, .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header a { color: #000 !important; text-align: center; } .is-singular.has-post-thumbnail:not(.single-format-image) .entry-posted .posted-info, .is-singular.has-post-thumbnail:not(.single-format-image) .entry-posted .edit-link { float: none; text-align: center; } .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header { padding-top: 3em; } } -
Thank you @thesacredpath! Indeed, you’ve engineered happiness! It was exactly what I wanted to change in my blog.
-
Woohoo and you are welcome. Let us know if you have any additional questions or problems.
-
Hi everyone,
I’m back for a few other questions on Dyad theme please.
Do you know how can I add the number of shares on the share buttons, under each of my article ?
Furthermore, is it possible to add a search bar in my blog ?
Many thanks,
Clementine -
I would like to remove the slider altogether.
It takes up too much space and I rather like the checkerboard look of images and posts.
Any help is greatly appreciated. I’ve never edited CSS before.
-
@cegr76, I don’t see Dyad on any of the site associated with your username. If you are talking about a different theme, can I ask you to create a new thread in the CSS Forum since CSS is generally theme specific, and please provide a link to the site you are asking about? Many thanks in advance.
-
@lucette63, when someone shares one of your posts or pages on one of the social networks, the number of shares will show up in a small circle in the icon. Are there any particular posts or pages that you know have been shared where the number is not showing up?
You can add a search widget to the footer widget area in Dyad.
-
-
Hi @cegr76,
You can use the following CSS code to remove the top slider area (which is currently gray on your website)
@media only screen and (max-width: 1200px) { .site-banner-media, .site-banner .site-banner-thumbnail { padding-bottom: 0; } } @media only screen and (min-width: 960px) { body:not(.is-singular) .content-area, .home .content-area, .blog .content-area, .single-format-image.has-post-thumbnail .content-area { margin-top: 90px; } }This will make sure that the content is sitting snug right after the menu on both mobile and and desktop versions.
@thesacredpath, thanks a lot for making me think of the mobile versions when suggesting custom CSS :)
-
@thesacredpath Many thanks, everything is fine now !
Do you also know how to put the article above?
Indeed , there is a large white margin above each article, on the right , and this requires us to scroll a lot to read the end of the article.Thanks !
-
@cegr76, it’s my pleasure. Enjoy!
@lucette63, if you mean the variable space just above the article, the code below should help bring the article a bit higher. If you mean something else, if you could give me a bit more details I’d be happy to try and help :)
@media only screen and (min-width: 1110px) { div#content { padding-top: 70px !important; } } @media only screen and (min-width: 961px) and (max-width: 1109px) { div#content { padding-top: 100px !important; } } -
@lucette63, are you talking about on single post pages such as http://bloglucette.com/2015/12/18/comment-fabriquer-son-shampoing-sec/ ? I’m not seeing a lot of white space there. There is 4em of top padding between the content and title/metadata which can be adjusted with this.
.is-singular.has-post-thumbnail:not(.home):not(.single-format-image) .entry-content { padding-top: 4em; }and then there is 90px of top margin between the icon/line and image when the image is above the content. You can adjust that with the following.
.is-singular:not(.home):not(.single-format-image) .entry-inner, .is-singular.single-format-image:not(.home):not(.has-post-thumbnail) .entry-inner { margin-top: 90px; }If I’ve misunderstood, let me know and point me to where you want it tightened up.
- The topic ‘Custom CSS Dyad Theme’ is closed to new replies.
WordPress.com Forums 