Altering layout of static home page
-
Hi there, I have several questions that I´m hoping you can help me with.
On my blogs home page, I would like to:
1. Remove the 4 thumbnail images and intro box, leaving just the rotating image slideshow.
2. Shift the menu down to align with the bottom of the logo.
3. Replace the social media buttons with text and shift them to align to the right hand side.
To make it easier to visualise the changes I´d like to make, I have gotten our designer to create a mock-up of how we´d ideally like the front page to look, follow the link: https://piteiraphotography.files.wordpress.com/2016/11/site.jpg
4. I would also like to know if it´s possible to purchase custom fonts for this theme?
I have tweaked the CSS of the site before, but it was always with the help of a designer and the good people of this forum, as I am not familiar with coding at all. Any help that you can provide would be hugely appreciated, thank you in advance!
The blog I need help with is: (visible only to logged in users)
-
Hello there!
Dropping these code snippets in your custom CSS area should do the trick:
1.
.home #blurb, .home .homepage-posts-selected { display: none; }2.
#snap-nav { margin-top: 61px; margin-bottom: -7px; }3.
.icons li .twitter, .icons li .facebook, .icons li .pinterest, .icons li .rss { background-image: none; height: 20px; width: auto; text-align: center; padding: 20px 9px; } .icons li .twitter::after { content: "twitter"; font-size: 13px; } .icons li .facebook::after { content: "facebook"; font-size: 13px; } .icons li .pinterest::after { content: "pinterest"; font-size: 13px; } .icons li .rss::after { content: "rss"; font-size: 13px; } #footer { background: none; padding-top: 0px; }Let me know if that doesn’t work!
Sage -
Hello!
You are a superstar, that worked really well! Thank you so much!
Would it be possible to make the social media links darker? They are almost invisible until you roll over them and I´m worried people won´t be able to see them.
Also, now that I´ve tweaked the icon at the bottom and removed what was there before, there is a thin horizontal line showing up that (I think) is part of the original theme design. Am I able to hide this line and reduce the empty space a bit, bringing the social media buttons closer to the main image?
Thank you so much for your help!! I´m so happy with how the site is looking!
-
Hello there,
Aw, you’re too kind, I’m happy to help :)
This should fix the colours fading:
.icons li .twitter, .icons li .facebook, .icons li .pinterest, .icons li .rss { opacity: .7; color: #000; }And then find this in your custom CSS area:
#footer { position: relative; padding-bottom: .2rem; font-size: 10px; }and replace it with this:
#footer { position: relative; padding-bottom: .2rem; font-size: 10px; border: none; margin-top: 0px; }Hope that helps!
Sage -
Thank you Sage, that worked perfectly, you are brilliant!
I think that with my fiddling though, I have broken another part of my blog and I have no idea what I did wrong!
I have this CSS in place, to remove the side bar on individual blog posts:
// This hides sidebar on single post view
body.single-post #sidebar {
display: none
}
// This makes the main content area wider, now that the sidebar is gone
body.single-post .with-sidebar {
width: 100%;
}And I also had some code (not sure where) that reduced the width of the text to match the width of the images (820px)
And now none of that is working anymore. :( I tried deleting and re-inserting the code above but it made no difference and now I´m afraid to play too much, in case I break something else!
Thank you so much for your help and sorry to be such a pain in the butt.
-
Hey there, great to hear the code worked!
Just from the outset I’d suggest that those comments should be wrapped like this:
/* This makes the main content area wider, now that the sidebar is gone */
instead of
// This makes the main content area wider, now that the sidebar is goneIf fixing those doesn’t work would you mind copying your entire custom CSS file into here so I can take a look?
Let me know,
Sage -
Hi Sage
That worked perfectly to remove the sidebar and make the main content wider, thank you! The part about the text being the same width as the images is still not working though, but I suspect that that was different code somewhere else and not related to the sidebar issue.
As requested, here is all the custom CSS we have going on:
body {color:#333;}
.wf-active h3 {color:#;}.home #blurb, .home .homepage-posts-selected {
display: none;
}/*seta*/
.grid-read-more:before {
display: none;
}img {
display: block;
margin: 0 auto;
}/*footer*/
.theme-container {
padding-bottom: 4rem;
}#footer {
position: relative;
padding-bottom: .2rem;
font-size: 10px;
border: none;
margin-top: -40px;
}#theme-byline {
bottom: -50px;
margin-bottom: 0;
position: absolute;
right: 0;
text-align: right;
}.tile .post {
border-color: #fff !important;
border-style: dotted !important;
}.page h1 {
display: none;
}#main-header {
border: none;
/*height: 80px;*/
}#snap-nav a {
font-size: 13px !important;
}#snap-nav {
margin-top: 61px;
margin-bottom: -7px;.main-content {
font-size: 100%;
}.wf-active body {
font-size: 14px;
font-size: .79rem;
}/* area post*/
.home .with-thumb .grid-content-wrapper {
display: none;
}.tile .post .post-wrapper, .tile .page .post-wrapper {
height: auto;
}.tile .post:nth-child(1), .tile .post:nth-child(2), .tile .page:nth-child(1), .tile .page:nth-child(2) {
height: auto;
}.tile .post:nth-of-type(2n+1), .tile .page:nth-of-type(2n+1), .tile .post, .tile .page_item {
border: none;
}.grid-read-more:before {
background-color: transparent;
content: “”;
}.blog .tile .post .post-wrapper {
height: 245px;
}.blog .tile .post {
height: 337px;
}.grid-read-more {
display: none
}
.tile .post:nth-of-type(2n+1) .set-post {
padding-right: 4%;
}
.tile .post:nth-of-type(2n) .set-post {
padding-left: 3%;
}/*redes sociais*/
.icons li .twitter, .icons li .facebook, .icons li .pinterest, .icons li .rss {
background-image: none;
height: 20px;
width: auto;
text-align: center;
padding: 20px 9px;
}.icons li .rss::after {
content: “INSTAGRAM”;
font-size: 13px;
}.icons li .facebook::after {
content: “FACEBOOK”;
font-size: 13px;
}.icons li .pinterest::after {
content: “PINTEREST”;
font-size: 13px;
}.icons li .twitter::after {
content: “TWITTER”;
font-size: 13px;
}.icons li .twitter, .icons li .facebook, .icons li .pinterest, .icons li .rss {
opacity: .7;
color: #000;
}@media screen and (max-width: 600px) {
#footer {
margin-top: 0;
}
.theme-container {
padding-top: 0;
}
}
.portfolio-details {display:none;}/* This hides sidebar on single post view*/
body.single-post #sidebar {
display: none
}
/* This makes the main content area wider, now that the sidebar is gone*/
body.single-post .with-sidebar {
width: 100%;
}.blog .grid-read-more {
top: -70px;
display: none
}
@media screen and (min-width: 972px) {
.blog .grid-read-more{
top:-40px;
display: none
}
}
.snap-tagline {
display: none;
}Thanks again for all your help, if you ever find yourself in Portugal and need a photographer then I am your girl!
-
Hello there,
Sorry for my delayed response, just found your reply now!
Glad that comment fix helped with the code, and thanks for pasting in the CSS. I can’t seem to see anything that looks wrong enough to break anything else (a few lines are missing their semi-colons and the like, but nothing major). It does look like code to set the width of the page is missing, however, in which case all that’s needed is to add something like this:
.single-post .main-content { width: 100%; max-width: 820px; margin: 0 auto; }Hope that helps, and thanks for that, I’ll keep you in mind if I find myself in Portugal :D
Sage -
Thanks Sage, that worked perfectly! My designer is still working on a few other little tweaks to the layout so I will probably be back again with a couple more questions, but it´s probably best to start a new thread as and when that happens.
Many thanks again for all your help!
-
Hi again… sorry.
I was going through the posts on the blog and it seems the code you gave me above is only working on the first 2 blog posts, everything else is still full width text. I tried playing around with the values but it doesn´t seem to make any difference. :(
Any ideas why it´s not working for all the posts?
I thought I was out of your hair but it seems not, apologies.
-
Hey there!
No worries at all :) Looks like there is a difference in the way the first two posts were created compared to the rest of the posts. Adding this code should fix it:
.single-post .portfolio-single-content { width: 100%; max-width: 820px; margin: 0 auto; float: none; }Hope that helps!
Sage -
-
- The topic ‘Altering layout of static home page’ is closed to new replies.
WordPress.com Forums 
