Editing CSS on Harmonic Theme
-
Hi,
I have been setting up a new website and am currently trying to work out a few kinks with the layout of the Harmonic Theme. I’d appreciate any assistance in editing the CSS to make these possible.
The front page of the Harmonic theme is made up of 5 sections: Title, News, Page, Widgets & Front Portfolio. Is there any way to move the Widgets section to the bottom of the page?
With the ‘Front Portfolio’ section is there any way to remove the white box around the featured image? Also is there any way to add the title of the portfolio post on top of the image on the front page only?
Does anyone know how to place a header image on individual portfolio pages? I’ve managed to achieve this on post pages (blog on my website) courtesy of this: https://en.forums.wordpress.com/topic/display-a-featured-image-on-archivecategory-pages-in-harmonic?replies=5#post-2392571. Is there a similar CSS that I can use?
How do I remove the white rectangle around the footer at the bottom of the page? It occurred when I changed from a rolling footer to a static one using this CSS:
#footer-nav-wrapper {
position: inherit;
}Many thanks,
Jordan Rossi
The blog I need help with is: championsandtravels.com
The blog I need help with is: (visible only to logged in users)
-
The front page of the Harmonic theme is made up of 5 sections: Title, News, Page, Widgets & Front Portfolio. Is there any way to move the Widgets section to the bottom of the page?
On responsive designed themes such as this, although it is physically possible to move the sections around, since we have to do it with position: absolute; the moved sections lose all relationship to the other sections and basically float free within the browser window. What that means is that they do not flow as they normally do and would require massive amounts of Media Queries to control the positioning of them based on screen/browser window widths.
With the ‘Front Portfolio’ section is there any way to remove the white box around the featured image? Also is there any way to add the title of the portfolio post on top of the image on the front page only?
Given the background image in the Portfolio section, your images will get sort of lost on top of it. You can try the following CSS to see what I mean.
.project-navigation-wrapper .jetpack-portfolio, .portfolio-projects .jetpack-portfolio, body.archive[class*="jetpack-portfolio"] .jetpack-portfolio { background: rgba(0, 0, 0, 0); }You could perhaps reduce the padding from 20px to 5px and keep the white background so the images don’t get lost like this.
.project-navigation-wrapper .jetpack-portfolio, .portfolio-projects .jetpack-portfolio, body.archive[class*="jetpack-portfolio"] .jetpack-portfolio { padding: 5px; }The HTML for the Portfolio section does not include titles, and that is not something that can be added via CSS.
Does anyone know how to place a header image on individual portfolio pages?
Are you talking about like on this page: http://championsandtravels.com/portfolio/the-interview-zach-gilford/ ? If so, we could, but we may not (probably won’t) be able to keep things responsive for all screen/window sizes.
How do I remove the white rectangle around the footer at the bottom of the page? It occurred when I changed from a rolling footer to a static one…
You can use this to get rid of the white.
section#slide-5 { padding-bottom: 0 !important; } -
Hi thesacredpath,
Thanks very much for your assistance. The CSS on removing the white rectangle at the bottom and the white boxes worked perfectly.
On responsive designed themes such as this, although it is physically possible to move the sections around, since we have to do it with position: absolute; the moved sections lose all relationship to the other sections and basically float free within the browser window. What that means is that they do not flow as they normally do and would require massive amounts of Media Queries to control the positioning of them based on screen/browser window widths.
So just for clarity’s sake, there’s no way to move the widgets section? I felt it seemed odd to display some work (posts), then your widgets, and then some more work.
Does anyone know how to place a header image on individual portfolio pages?
Are you talking about like on this page: http://championsandtravels.com/portfolio/the-interview-zach-gilford/ ? If so, we could, but we may not (probably won’t) be able to keep things responsive for all screen/window sizes.
Yes, those are the portfolio pages where I would like a header image. Can you clarify what you mean by you wouldn’t be able to keep things responsive?
Thanks for all your help so far.
Best,
Jordan -
Hi Jordan,
So just for clarity’s sake, there’s no way to move the widgets section? I felt it seemed odd to display some work (posts), then your widgets, and then some more work.
Sorry, no there isn’t and have it work cleanly for all screen/window widths. It would require editing of the theme php script files to reorder things and have it work the way it should, and we cannot do that at WordPress.com.
Yes, those are the portfolio pages where I would like a header image. Can you clarify what you mean by you wouldn’t be able to keep things responsive?
What we would have to do would be to place the image at the top of #content-wrapper and then space #content down so the image shows above it and set the image to adjust in width so that it always is full width of #content-wrapper. At different widths, that image would of course be different heights as well so the spacing between the image and the content would have to be continually adjusted using Media Queries so it would look good at all screen/window widths. I’ve attempted this before, and never had it work cleanly and ended up with 20 or so Media Queries to adjust the positioning of things.
-
Hi thesacredpath,
Again, thanks for all your help with this.So, again, just to be clear is there a way to place a header image on the portfolio pages or are you saying it’s not possible?
Many thanks,
-
So, again, just to be clear is there a way to place a header image on the portfolio pages or are you saying it’s not possible?
It is possible, but it takes a good bit of CSS to adjust things for different widths so that there isn’t a large gap between the added image and the content.
If you can upload an image to your media library that you want to use, and tell me which page you want to use it on, I can take a look and see how close I can get things. If we can get it to where you are happy with it, then you can use the code as a guide for doing in on other pages.
-
That’s great – thanks very much thesacredpath.
Could we please try the image: https://championsandtravels.files.wordpress.com/2015/05/img_3297.jpg
On this portfolio page: http://championsandtravels.com/portfolio/metlife-stadium/
Please let me know if you need anything else.
-
Heh, try the following and see what you think. By using a 65% top padding on the content, it seems to work fine with this image and doesn’t need a bunch of media queries like I though it was going to.
.postid-54 #content-wrapper { background: url('https://championsandtravels.files.wordpress.com/2015/05/img_3297.jpg') no-repeat scroll center top / contain; } .postid-54 #content.site-wrapper { padding-top: 65%; } -
Hey, that seems to work great! Thanks very much for the assistance.
Would you be able to inform me how to adjust the code so that I can make each individual portfolio page have a different header image? I’ve figured out how to change the image by adjusting the URL link within the code.
Many thanks,
-
Use the code I’ve given as a templay. What you are going to be changing would be the first bit on both selectors, this part
.postid-54What you will want to do is to view the HTML source code for each Portfolio page you wish to change and look in the opening body selector where you will find the unique page id class.
I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.
-
-
- The topic ‘Editing CSS on Harmonic Theme’ is closed to new replies.
WordPress.com Forums 
