Changing the spacing between the page title and other elements
-
Hi,
I’d like to reduce the space between the page title (ex.”Valiant Leadership”) and the horizontal list of category pages right above it. I would also like to reduce the space between the page title and the description found immediately below.
Could you kindly help me out with the CCS code needed? I’ve never had to make these kinds of changes before, so I’m not sure which selector(s) to use!
Thanks in advance!
C.The blog I need help with is: (visible only to logged in users)
-
Hi there, add the following to your custom CSS and adjust the 5.25em value to your liking.
.site-branding { margin-bottom: 5.25em; } -
-
-
Hey there –
I’m wasn’t sure how to categorize this in the forum, so I just replied to this chain. I’m having trouble pin-pointing the selectors for these 4 items:
1. The 2 small lines on each side of my tagline, in the masthead
2. The solid bar / box that appears when you scrolls over the category names in the main menu
3. The links in the footer text of “Related” at the end of the posts. I’ve only able to access the flat text using: .entry-footer {color: #384e77;}
4. The box below “Leave a Reply” that says ‘Enter your comment here….)If you can help with some CSS code, it would be much appreciated!
C. -
-
Hi there, and sorry, I didn’t see this come up in my list.
1. The 2 small lines on each side of my tagline, in the masthead
I almost missed those lines since they disappear below about 1350px in width. The line is set with a :after pseudo attribute on .site-description. The following is the code for that line. If you wish to get rid of the line, simply set background to none. If you wish to change the color, edit the color code in background as desired. Whatever declarations you do not modify or use, just delete them.
.site-description::after { background: #3d3e40; bottom: 50%; content: ""; height: 1px; left: 0; width: 100%; z-index: -1; }2. The solid bar / box that appears when you scrolls over the category names in the main menu
The color for the line above the categories on hover is set here:
.nav--main > li > a::before { background: #171617 none repeat scroll 0 0; content: ""; height: 0; left: 0; pointer-events: none; position: absolute; top: 0; transition: height 0.2s ease-in-out 0s; width: 100%; }If you wish to get rid of it, use the following
.nav--main > li:hover > a::before { height: 0; }3. The links in the footer text of “Related” at the end of the posts. I’ve only able to access the flat text using: .entry-footer {color: #384e77;}
I see a rule in your CSS that is almost correct. You have this
#jp-post-flair .jp-relatedposts-post-a`
replace the dash between post and a and then you can set the link color as desired.4. The box below “Leave a Reply” that says ‘Enter your comment here….)
The style and color of the box is set here:
.highlander-dark #respond #comment-form-comment, .highlander-dark #comment-form-share-text-padder { background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0; border: 1px solid rgba(255, 255, 255, 0.13); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.55) inset; }and the text color is set here
.highlander-dark #respond #comment-form-comment textarea, .highlander-dark #comment-form-share-text-padder textarea { color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); } -
Hi There,
Ok, so I’ve made some progress (thanks!) but not everything is working:
“I see a rule in your CSS that is almost correct. You have this #jp-post-flair .jp-relatedposts-post-a` replace the dash between post and a and then you can set the link color as desired” — I tried but nothing changes using #jp-post-flair .jp-relatedposts-post a {color: red;}
The text in the “Leave a reply box “Enter your comment here… also doesn’t change. And, I hadn’t noticed that another box identifying the user opens up below that initial box. How to I change that colour?
I’ll also trow in a new one – my “Older Posts” button from my landing page is now center-justified ( didn’t ask for that but it’s ok) and the background colour of the button has reverted to black – also didn’t ask it to do that! Help:(
C.
-
Hmmm, sorry about that. In your custom CSS, you have the following rule:
#jp-post-flair .jp-relatedposts-post-a { color: #010dae; }If I change it to this
#jp-post-flair .jp-relatedposts-post-a { color: red; }the links turn red in the Related section below your posts. The line below (category) remains the grey color. The text below has an opacity setting of 0.6 in the following rule
div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context { opacity: 0.6; }You can change that opacity to 1 and add a color declaration if you wish to change that color.
On the fields below (name, email, site) you can set the background color of those fields using the following CSS selector
#respond .comment-form-fields div.comment-form-field
For the text in those fields, you can use the following CSS selector
.highlander-dark #respond .comment-form-fields label
for the darker grey text in the form fields, you can use this selector
.highlander-dark #respond .comment-form-fields label span.required, .highlander-dark #respond .comment-form-fields label span.nopublish
For the background color on the lower section, you can use this CSS selector to set the color
.highlander-dark #respond #comment-form-identity -
Ok, I couldn’t make all of it work, but enough for it to look the way I want. I may have explained something incorrectly – the links that I was referring to under “Related” aren’t the 3 article links; it’s the block of footer text in that section that include the post category, tags and permalink. I wanted to change the colour but decided to keep the grey in the end.
Tonight I noticed was that the star next to the “Like” link are in light blue – of course, I can’t seem to find the right selector to change the color for that either. Sigh :-/
Thanks so much for your help.
C. -
Ah, sorry I misunderstood. You have this now in your custom CSS which changed the non-link text color in the the tags/categories section.
.entry-footer { color: #000557; }If you wish to change the color of the links in that section, add this and then edit the color as desired.
.single .entry-footer a { color: #cc0000; }To change the color of the star on the like button, add the following and edit the color.
.wpl-button.like a::before, .wpl-button.liked a::before { color: #cc0000; }If you also wish to change the reblog button icon on the left of the button, add this and edit.
.wpl-button.reblog a::before { color: #11ee44; } -
Ha! It worked:)
And good to know for the buttons, but I actually meant the star next to the link “Like” in the comment section….where you can “like” someone’s comment:)
C.
-
Ah, add this instead and adjust as desired.
a.comment-like-link::before { color: #cc0000; } -
Looks great, thanks!
I though that I could do this one myself, but apparently not:( There is small text that says “Be the first to like this”, right below the Like and Reblog buttons, where the social media icons are lined up – how can I get to that text?
Thanks,
C. -
Well, you’ve run into something that can’t be changed. The styling for that line of text is set by the sharing software and I’ve never found a way to change the styling on that.
-
-
You are welcome, and I wish they would change how all that is done so that we could at least change colors or fonts. I know that has been discussed, so let’s keep our fingers crossed. :)
- The topic ‘Changing the spacing between the page title and other elements’ is closed to new replies.
WordPress.com Forums 