Harmonic Theme logo issues

mirandaostler · Member · Apr 23, 2016 at 8:06 pm
Copy link

Add topic to favorites
Hi – I love the Harmonic theme but I’ve had a few problems with it.
The main one at the moment is regarding the ‘logo’ idea. Is there any way one can edit the size and placement of the logo on the front page? At the moment it is appearing way too far to the left and too small. It also looks as if the opacity has been reduced, which I have most certainly not done. I am very inexperienced with code so I would appreciate any help! My site is http://www.mirandaostler.com, and I am using Safari 9.0.3 on a MacBook Pro.
timethief · Member · Apr 23, 2016 at 9:27 pm
Copy link
Have you been using this guide https://en.support.wordpress.com/site-logo/ ?

To see all the themes that are supported, check out the Site Logo filter https://wordpress.com/themes/filter/site-logo on the Theme Showcase. https://wordpress.com/themes

See here for details on purchasing the annually renewable Premium bundle http://store.wordpress.com/plans/premium/ that contains a custom design upgrade required for CSS editing: Custom design – Frequently Asked Questions
http://en.support.wordpress.com/custom-design/#frequently-asked-questions
http://en.support.wordpress.com/custom-design/
http://en.support.wordpress.com/custom-design/editing-css/
http://en.support.wordpress.com/custom-design/custom-fonts/

Note 1: Once you have the required upgrade you can use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can create a thread that will appear in the CSS Forum where you will get the help you need with CSS editing.

Note 2: You can also post there prior to purchasing an upgrade to get an answer to whether or not what you want to do can be accomplished via CSS editing.
mirandaostler · Member · Apr 23, 2016 at 9:30 pm
Copy link
Thank you timethief – I am actually already on the Premium bundle, so I will have a look at CSS!
timethief · Member · Apr 23, 2016 at 9:47 pm
Copy link
You`re welcome and best wishes.
kathrynwp · Staff · Apr 25, 2016 at 3:18 pm
Copy link
Let me know if I can help with anything here.

To change the size, you can try something like this:
```
img.site-logo {
  max-width: 400px;
}
```
The element you’re currently targeting isn’t quite the right one. A browser inspector is a handy way to find the right element to target with CSS.

Keep in mind that Harmonic is designed to display the logo at no more than 250px wide. Enlarging it with CSS may make the logo look a bit jagged/pixillated, especially with a text-based logo like yours, so I’d recommend keeping it at the current size.

It also looks as if the opacity has been reduced, which I have most certainly not done.

The panel changes in opacity dynamically as you scroll, but you can override that with:
```
#slide-1 .hsContent {
     opacity: 1 !important;
}
```
If you let me know in what way you’d like to change the logo positioning I can help with that too.
mirandaostler · Member · Apr 27, 2016 at 12:49 pm
Copy link
@kathrynwp Thank you so much! That’s solved it perfectly :)
kathrynwp · Staff · Apr 27, 2016 at 1:39 pm
Copy link
You’re very welcome, glad you’re set!
mirandaostler · Member · Apr 27, 2016 at 1:43 pm
Copy link
Ooh. Sorry to bother you again, but I have just realised that the logo adjustment now means that on mobile (or on my iPhone at least) the logo is now directly over my face. How would I go about making it stay in the middle of the photo on a mobile device?
kathrynwp · Staff · Apr 27, 2016 at 1:45 pm
Copy link
If you decide to restrict your changes to certain screen sizes, you can learn more about using media queries that target certain screen sizes here:

http://en.support.wordpress.com/custom-design/custom-css-media-queries/

Media Queries for Standard Devices

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Media queries are a simple concept but powerful in practice, and can take some experimentation and testing to get right.
mirandaostler · Member · Apr 27, 2016 at 1:46 pm
Copy link
Thank you! I’ll have a go.

No items found.