Left sidebar padding between elements
-
Looking to modify left sidebar at skirmisheswithreality.net as my intro into CSS work. Used ‘inspect element’ browser function to see associated HTML and Styling code, but need a little help to get going.
Specifically: notice that left sidebar content runs too far down page, so want to shorten it. Idea is to shorten spacing between elements rather than the sizes of them. For example:
How to shorten top padding above icon (foto)?
Same for padding space below icon foto?
Also padding space between subtitle of blogname and first menu item (i.e. Home)?
Finally, also spacing between each menu item (About, Agora, etc…)?Main issue is finding the correct elements referring to these items above.
Thanks Much.
The blog I need help with is: (visible only to logged in users)
-
Hi there, the padding above the image is controlled here.
.admin-bar .site-header { padding-top: 122px; }The space below the image is bottom margin here. You can use decimal em units such as 0.7em.
.site-logo-link { margin-bottom: 1em; }The space between title/tagline and menu is top padding here.
.main-navigation { padding-top: 30px; }The spacing between the menu items is due for the most part to line height here.
.main-navigation a { line-height: 1.5; } -
Thanks alot. Worked well. I will look through the ‘inspect element’ info and make sure I understand why these things are the correct class names, etc.
Meanwhile, I tried doing below on my own, but with no apparent results. Can you explain why?
.site-title {
color: #AD0C32;
} -
That’s great.
You are ever sooooo close. :)
In some themes the color is set in .site-title and in some it is set on the “a” element of the site title (link). In this case, you need to use the following.
.site-title a { color: #AD0C32; } -
Ah. I suspected this while thinking about it. I know this HTML/CSS stuff can be pretty flexible — different ways to do same thing. Plus I guess site titles don’t always have to be clickable links.
Thanks again — it seems what I really need is how to know how to figure this out myself by looking at the listings. Any hints? Is it just a matter of clicking on ‘inspect element’ and seeing what code snippet is highlighted?
-
Hi,
About the “logo” (photo) near the top of the left sidebar:
How do I alter where the link points when it is clicked?I can see the HTML code but have no idea where to access it for editing:
<!– Get the site branding –>
home”>
<img width=”116″ height=”126″ src=”https://skirmisheswithreality.files.wordpress.com/2015/09/moi-3-e1441325223243.jpeg? w=116″ class=”site-logo attachment-editor-logo” alt=”moi 3″ data-size=”editor-logo”>
Basically, I want to replace that home with about, so click goes to the About page. Can’t find where I would edit this. Thanks!
-
About the “logo” (photo) near the top of the left sidebar:
How do I alter where the link points when it is clicked? Basically, I want to replace that home with about, so click goes to the About page.That is not something that can be done with CSS. It would require editing of the theme php script files and we cannot do that here at WordPress.com.
-
Oh. OK, thank you.
How about this idea? (Not sure what the theme forces or permits.)
Could I simply elect to remove the logo entirely from the sidebar? And then perhaps insert an image widget with a link behind it to where I want to go? -
In Editor, widgets are hidden behind the folder-looking tab at the top above the existing logo image, and the HTML and CSS of the header area on the left are done in such a way that we can’t move a widget out from within that tab to be visible with the title and menu.
Have you considered having your about page as the Front Page of your site with a separate page for your posts? You could keep the text of the about page and then move the contact form to a separate page and link to it from the about page. I’m just sort of rambling here trying to find a solution that might work for you.
It may be that the Editor theme isn’t going to be the best one for you to use due to the way it is structured.
Also, most responsive themes are sort of tricky when it comes to moving widgets up into the header area since the elements of the page shift and adapt for all screen/window sizes, and can result in collisions.
-
Hi,
Thanks for thinking about this.
I think I understand — you’re saying that the fa-fa bar stuff has lots of widgets inside and parts of the code influence how other stuff on sidebar appears.
I guess I have 2 contradictory aims here: getting look/feel right so I can turn attention towards writing lots of content -and- learning CSS. PHP. and other tech WP stuff. Sometimes they get in each other’s way.
I’ll probably ride with Editor for now, since I like some stuff about it. My main issue here was that the logo, the site-title, and the menu item “Home” all do basically the same thing; so thought I’d make two ways to get to About page. But no big deal for now. Down the road, thinking to revamp front page into more of a windowpane style so people can see six or s most recent posts at a glance without scrolling and then have usual Editor look/feel for when they click on ‘More’ and want to read. Maybe that’s not too easy under Editor theme, not sure.
Anyway, thanks for help! -
-
P.S. — Went with your idea to separate out About and Contact into two pages. Fits better. Will take a crack at altering the spacing and fontisze, etc on the Contact page over the weekend. Might get back to you if it doesn’t work out :)
-
-
Me again :)
Began messing with trying to get About and Contact pages sized better so they fit into one screen, without scrolling. Started with this:
/****************************/
/* about page */
/****************************/
/* downsize my name */
.wf-active .entry-title {
font-size: 30px;
}/* downsize page content text */
.wf-active .entry-content {
font-size: 20px;
}/****************************/
/* contact-me page */
/****************************/Noticed that the ‘.wf-active .entry-title’ selector is too universal — applied CSS change even to posts, etc. Must be a way to target the CSS entry to only a specific page — but can’t see how in the inspect element windows. I guess in regular project, each page could have it’s own .css file? How do I modify selector to target just a specific page? (After that I have to go about dropping some padding and fontsizes of various items within the Contact page. Much Thanks!
-
Hi, we can target individual pages using the page id class set in the opening body HTML tag for the individual page. The .wf-active is set in the opening HTML tag, so we have to sandwich the page id class between that and the .entry title such as this.
.wf-active .page-id-2 .entry-title { font-size: 32px; }Same goes for the content font size.
.wf-active .page-id-2 .entry-content { font-size: 20px; }The above takes care of your About page. For the contact page, the unique CSS body class for that page is .page-id-378. You can just copy the above and then change “2” to “378” and you are good to go.
If you inspect your pages from your web browser inspector, in the HTML section, you can look for the opening body selector which will be near the top below html and head. For your Contact page, it begins like this.
<body class="page page-id-378 page-template-default... -
Good, thanks again. This explains some stuff.
I assume from looking that the <html> and <body> tags can have many different classes defined to them for various uses throughtout sitedoc.Now to revisit some spacing and padding issues — you helped me with these for sidebar recently. Same things apply to About and Contact pages. What’s difficult for me is figuring out which CSS selectors do what when looking at inspect windows.
About page: how to fine tune padding above and below page title.
Contact page: same thing.
Later on: how to mess with contact form, maybe font?, in order to compress it onto one screen.Thanks — learning alot through you.
-
Hi there, I should probably share some of my tricks for finding this sort of thing on a screencast. Basically what I do, is in the HTML side of the inspector, I hover my mouse over the different elements until I find the one that shows padding or margin in the place that I want to change. Then I look in the CSS pane on the right and scroll around until I find the CSS rule with the padding or margin. Then it is just a matter of copying out the selector and creating the declaration that changes what I want to change.
In the case of the spacing above the titles on pages such as your about page, there is a 3% top padding on .site-content. If you wish to change that top padding on only the about and contact page, your selectors would look like this
.wf-active .page-id-2 .site-content { padding-top: padding: 5%; }and
.wf-active .page-id-378 .site-content { padding-top: padding: 5%; }If you wish to make the adjustment on all static pages, then you can just use this.
.page .site-content { padding-top: padding: 5%; }For the spacing below the page titles, there is bottom margin on the .entry-title div, so you would do this:
.page-id-2 .entry-title { margin-bottom: 4%; } .page-id-378 .entry-title { margin-bottom: 4%; }and again if you want to change all static pages,
.page .entry-title { margin-bottom: 4%; }The values I have in the margins above are the original so you can adjust those as you see fit.
See how things go with the above and then we can tackle the contact form spacing. It will probably be a bit more complex since we will likely have to adjust not only padding and margins on the elements, but also possibly font size to get things to fit on one screen. Of course, “screen” is a nebulous sort of thing as all screens are not the same size. :)
-
Thanks again.
yes, I realize I’m kind of going by my own screensize, plus I have no idea about rules for customizing with sensitivity to mobile screensizes, etc. — but still learning for now.
I was able to retrace how you found these items, and added the custom CSS. I also began applying similar techniques to the contact-form page. You’ll be able to see in my CSS which items I found regarding contact-form and adjusted. Interesting that (REQUIRED) items had a different selector-id from the label-names of the contact form fields.But some things I’ve not found yet:
1) margin at top of contact-form, below page-text could be smaller
2) paddings between each field of form is too much; i.e. between NAME/MESSAGE or MESSAGE/EMAIL, etc
3) font & size of text-entry fields are too large
4) maybe: margin and size of SUBMIT button?I’ll keep looking for these until I hear back from you, thanks!
-
P.S. I started messing with an index/lookup page (still private), the idea of which is to have a kind of radio button area where user can choose how to structure a lookup of articles and posts. Partly I’m doing this to learn, to experiment. I think I came across a dropdown shortcode somewhere. Is it so? If so, is there a way to nest/combine with the display-post shortcode? (Know what I mean?) Final part of the idea would use PHP to take the info the user selects from radio buttons and build the approrpiate shortcode calls to present the desired search results inside a dropdown. Which leads to final question — I started looking at PHP, code would be simple if-then-else or case block. But are we allowed to use PHP in wordpress.com? Thanks.
- The topic ‘Left sidebar padding between elements’ is closed to new replies.
WordPress.com Forums 