Help with general, basic CSS (find selectors, change basic attributes)
-
Hey there,
I am customizing the Pachyderm theme. What I am having most trouble with is finding the correct selectors for all the different areas. I am sifting through the source document, trying out everything I find -but it’s a tedious task.
I would like to add borders to the content pages. The code I am using is:
[code].page {
border-left: 2px solid #F15D5D;
border-right: 2px solid #F15D5D;
}[/code]However -it adds borders to my content pages AS WELL as to the entire website (you can see the thin border on the edges of your screen) The content page borders are black no matter what color I put in (the website borders are the correct color) and obviously I’d like to get rid of the borders around the entire website. Any ideas?
Also any idea how to find the correct selectors for the front page titles, the line with the date, the tag line underneath the posts and the “Write a comment” section? @_@
I tried contacting the creator of the theme, but she doesn’t offer any support, so you guys are my only hope!
The blog I need help with is: (visible only to logged in users)
-
Hi there,
However -it adds borders to my content pages AS WELL as to the entire website (you can see the thin border on the edges of your screen)
You were correct that .page can target the Page’s content area. However, a ‘.page’ class is used multiple times by more than one tag. If you view-source this Page (http://littlegnomehome.com/our-schedule/) for example, the body tag has a ‘page’ class, and then further down below, there’s an article tag with a ‘page’ class, too. This is why you see two borders.
To fix this, you will want to specify the selector more (I’ve also added the border-bottom part to deal with the black borders):
/*Content Pages Attributes*/ article.page { border-left: 2px dashed #F15D5D; border-right: 2px dashed #F15D5D; border-bottom: 4px solid #F15D5D; }Also any idea how to find the correct selectors for the front page titles, the line with the date, the tag line underneath the posts and the “Write a comment” section?
- Front page titles: body.home h1.entry-title (for the heading) and body.home h1.entry-title a (for the link inside the heading, useful if you want to change the color). Note that this only affects the home page titles (as you requested). If you want them to apply to other pages as well, remove the body.home part
- The line with the date: Not quite sure what you mean with this?
- The tag line underneath the posts: Not sure which one this is, either
- The “Write a comment” section: .comment-reply-title
-
Wow…thank you so much! I seem to be fine coding the changes I want – it is finding the right selectors that really gives me trouble. That was VERY helpful there!
-
Found this video for finding selectors! Could be useful: http://www.youtube.com/watch?v=V2aAEzlvyDc
-
I figured it out – the date line I meant is .entry-meta (the line with the date of the post in it) so I managed to change the color on that as well :D
-
Alright – I have discovered a LOT more and am having crazy fun with this…all the stuff one can do, once you find the correct selector!
One more question:
I can’t seem to change the font size of the links in the main menu – any idea how to fix that?
-
I believe you already knEw that .navigation-main a is the selector for main menu links, but font-size didn’t work when you tried.
This is because another CSS (made by WordPress itself) overrides your CSS rule. Sometimes this happens.
A simple fix is to add !important next to a statement and before the closing ;. This will allow your statement to override another’s, so it gets applied on the browser.
The following is already in your custom CSS, I just added the font-size part at the end. Try it out!
.navigation-main a { display: inline; padding-top: 17px; padding-bottom: 15px; -moz-border-top-left-radius: 1.563em; -moz-border-top-right-radius: 1.563em; -webkit-border-top-left-radius: 1.563em; -webkit-border-top-right-radius: 1.563em; border-top-left-radius: 1.563em; border-top-right-radius: 1.563em; font-size: 14px !important; } -
Aaaaand another thing learned. That !important is a very neat and easy trick to overwrite the original coding! Thanks so much :D Now I just have to figure out a way to space the links tighter, so that a larger font size will fit on the menu bar – but I think I can do it >:O
-
Alright. Now I’d like to move the “previous” and “Next” buttons on top of the comment box, between the two solid lines I have there. Here’s the code I have been using, however, the buttons need to not be in a fixed spot but rather move up and down depending on how long the posts are.
[code]
/*The Comment Box and Comment title are how I want them*/
H3#reply-title.comment-reply-title {
color: #555555;
font-size: 20pt;
}DIV#respond.comment-respond.js {
margin-top: 55px;
border-top: 4px solid #555555;
}H3#reply-title.comment-reply-title {
margin-top: 35px;
color: #555555;
font-size: 20pt;
border-top: 1px dotted #555555;
}/*The Previous and Next Buttons don't move up and down depending on the post lengths. They vanish if the post is too long or too short.*/
NAV#nav-below.navigation-post {
margin-top: -336px;
margin-left: 455px;
}
.site-footer [class*="navigation"] .previous a {background: #F15D5D}
.site-footer [class*="navigation"] .next a {background: #F15D5D}[/code]
-
Oops that code thing works differently here XD Here’s the code:
/*The Comment Box and Comment title are how I want them*/ H3#reply-title.comment-reply-title { color: #555555; font-size: 20pt; } DIV#respond.comment-respond.js { margin-top: 55px; border-top: 4px solid #555555; } H3#reply-title.comment-reply-title { margin-top: 35px; color: #555555; font-size: 20pt; border-top: 1px dotted #555555; } /*The Previous and Next Buttons don't move up and down depending on the post lengths. They vanish if the post is too long or too short.*/ NAV#nav-below.navigation-post { margin-top: -336px; margin-left: 455px; } .site-footer [class*="navigation"] .previous a {background: #F15D5D} .site-footer [class*="navigation"] .next a {background: #F15D5D} -
Those two lines above the comments section are in a different parent div than the navigation below so position: absolute is the only way to move them, and that breaks the relationship with the other elements in the page. If the comments and nav-below where in the same parent div, then the nav could be moved up above the comments by setting the parent div to position: relative so that the nav would then stay contained in the parent div.
That is a long way of saying that I see no way to do it, but given you are getting into CSS, and having fun with it, I thought I would give a little better explanation.
-
Yes, that’s what I figured after carefully treading the whole code for those segments and looking up the position command! I am now just setting the buttons on top of the site footer and gave it more spacing with the margins and it works – not what I wanted, but definitely the best I can do with the coding given!
-
I have gotten a reply from a visitor to the website, saying they can not read the answers in the FAQ section from their iPad…is there anything I can do about that? That’s something I am totally clueless about.
- The topic ‘Help with general, basic CSS (find selectors, change basic attributes)’ is closed to new replies.
WordPress.com Forums 