Adjusting style and location of Next/Prev links Academica Theme
-
1. How do I go about changing location of Next/Prev links? For example, how would I move them to the top of the post just below the title?
2. How do I change style formatting? Color of bkg, width of box, size of text, etc. for these links.
https://game-of-thrones-episodes.com/2017/07/19/cersei-plans-for-war/
The blog I need help with is: (visible only to logged in users)
-
to change formatting, I guess I use
#wrap .navigation a, #wrap .comment-reply-link, #wrap #cancel-comment-reply-link {
background: #336699;
color: #fff;
display: inline-block;
font-weight: normal;
font-size: 10px;
margin: 1px;
padding: 5px 8px;
text-shadow: none;
text-transform: uppercase;
}Is that correct?
But how about changing the location. Is there a simple way to move it to the top, or do I have to adjust the margin settings, etc. ?
-
1. How do I go about changing location of Next/Prev links? For example, how would I move them to the top of the post just below the title?
We can do that with the following CSS, but do note that visitors using Internet Explorer 9 or older will not see this change since IE9 does not support this CSS.
.column.single { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; } .column.single .navigation { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } .column.single .hentry { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; } .column.single #comments { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; -webkit-order: 3; order: 3; }2. How do I change style formatting? Color of bkg, width of box, size of text, etc. for these links
You have the correct code for styling those buttons, but it also sets the style for some other elements, so you may want to limit the selector to just
#wrap .navigation a
If you wish to change the width of them, that is in a different selector..navigation > span { max-width: 49%; } -
looking good… thanks…. how do I now move things up so there is less space between title and rest of column?
-
From above
1. how do I now move things up so there is less space between title and rest of column?
Also, sacredpath, I liked the red bkg and white font color for the a.hover, I made a whole bunch of changes to get rid of the orange hover, but this did not affect the navigation menu.
2. How can I change the orange to match the red I implemented elsewhere?
3. How can I change all the menu widgets so that when one hovers over the link the entire bkg of that line turns red with white font, and when on the page, have it fixed white on red just like it does in the navigation menu on top of the page?I hope this is not too much to ask.
-
I think I found the answer to #2 above
#main-nav ul a:hover, #main-nav .menu-item:hover, #main-nav .page_item:hover, #main-nav .current-menu-item > a, #main-nav .current-menu-ancestor > a, #main-nav .current_page_item > a, #main-nav .current_page_ancestor > a {
color: #fff;
background-color: darkred;
} -
Can you also check to see what I did below works for #1 above, please.
/* MOVE CENTER COLUMN up on posts pages */
.column-title, #content .column-full, .column-full .column-content, .page-template-template-full-width-php .column-content {
margin-top: 0;
padding-bottom: 0px;
}/* MOVE LEFT AND RIGHT SIDEBARS up on posts pages */
.column-narrow {
position: relative;
top: -35px;
} -
that code above didn’t seem to work, its effecting more than just the post pages, I get sooooooo frustrated!!!!!!!! with myself!!!!!!
-
To tighten up the spacing, the following two rules should do it for you.
.single .column-title { padding-bottom: 0; } .column.single .navigation { margin-top: 0; }I see you have gotten the background color off of the post navigation links. I see a red hover, but I think it needs some padding as it is quite tight around the text. Give this a try.
#wrap .navigation a { padding: 5px; } -
good call on the wrap, thanks.
Tightening up the space also works, except compare the the left and right columns on the following pages, they do not match. It seems that they need to be brought down on the post page.
I had to change the following which I added earlier to move left and right columns up on posts pages.
BEFORE
.column-narrow {
position: relative;
top: -55px;
}AFTER
.column-narrow {
position: relative;
top: -35px;
}Realize, I don’t really know what I am doing (a lot of trial and error), and sometimes I add too much “salt” and then start adding “sugar” to reduce the saltiness, or another metaphor-ducktape, if you will. And that makes a mess of things sometimes.
That’s why I am so appreciative of your help, and any tips you can give me.
Any luck with #3 above?
-
I didn’t include above the two pages to compare:
https://game-of-thrones-episodes.com/2017/07/19/jon-prepares-for-war/
https://game-of-thrones-episodes.com/tag/701-dragonstone/?order=asc
This much I know:
The first one is a post page. The second is an archive page.This much I don’t know:
When I made the BEFORE/AFTER change above, by changing the .column-narrow selector properties, it affects both pages. How do I make it so I can increase the top of the left sidebar +20 px without it effecting the left sidebar on the post pages?
This I don’t know:
-
I didn’t include above the two pages to compare:
https://game-of-thrones-episodes.com/2017/07/19/jon-prepares-for-war/
https://game-of-thrones-episodes.com/tag/701-dragonstone/?order=asc
This much I know:
The first one is a post page. The second is an archive page.This much I don’t know:
When I made the BEFORE/AFTER change above, by changing the .column-narrow selector properties, it affects both pages. How do I make it so I can increase the top of the left sidebar +20 px without it effecting the left sidebar on the post pages?
This I don’t know:
-
For the menu widgets, this catches the hover colors and also the current page item color change.
#content .widget ul.menu li.current-menu-item { background-color: #8b0000; } #content .widget ul.menu li.current-menu-item > a { color: #fff; } #content .widget ul.menu li { margin-bottom: 0; padding-bottom: 5px; padding-left: 5px; } #content .widget ul.menu li:hover { background-color: #8b0000; } #content .widget ul.menu li > a:hover { color: #fff; }When I made the BEFORE/AFTER change above, by changing the .column-narrow selector properties, it affects both pages. How do I make it so I can increase the top of the left sidebar +20 px without it effecting the left sidebar on the post pages?
Can you explain a bit further? It may just be that I’m my brain is mush since it’s now midnight.
-
mmm, that menu change does not look as good as I thought it might. So I am going to keep it the way it was, but thanks. I hope it didn’t take too much time.
As far as the other issue, that you want me to explain further. The best way to see what I am talking about, is to open the following links in separate tabs, and then toggle between them.
https://game-of-thrones-episodes.com/2017/07/19/jon-prepares-for-war/
https://game-of-thrones-episodes.com/tag/701-dragonstone/?order=asc
Notice the SE1, SE2… menu bar how it jumps up and down. The two left columns are out of sync. When I have tried to fix this, I would end up affecting other columns on other pages. It turned into a real nightmare.
-
To only affect the archive pages, use the archive CSS class set in the opening body html tag on archive pages like this.
.archive .column-narrow { position: relative; top: -55px; }Is that what you are wanting?
-
Yes, thanks. I changed it to -57 so that everything matches perfectly (at least on Chrome). I just love being able to switch pages and menu items are static/no movement.
Do the pages align perfectly on IE, as they do now with Chrome?
Gradually, I am learning a few things (i.e. about the importance of “adjective” “pre-runner” or whatever you call them).
Thanks again :)
-
- The topic ‘Adjusting style and location of Next/Prev links Academica Theme’ is closed to new replies.
WordPress.com Forums 