• Plans & Pricing
  • Log in
  • Get started
  • WordPress Hosting
  • WordPress for Agencies
  • Become an Affiliate
  • Domain Names
  • AI Website Builder
  • Website Builder
  • Create a Blog
  • Newsletter
  • Professional Email
  • Website Design Services
  • Commerce
  • WordPress Studio
  • Enterprise WordPress 
  • Overview
  • WordPress Themes
  • WordPress Plugins
  • WordPress Patterns
  • Google Apps
  • Support Center
  • WordPress News
  • Business Name Generator
  • Logo Maker
  • Discover New Posts
  • Popular Tags
  • Blog Search
Get started
  • Sign up
  • Log in
About
  • Plans & Pricing
Products
  • WordPress Hosting
  • WordPress for Agencies
  • Become an Affiliate
  • Domain Names
  • AI Website Builder
  • Website Builder
  • Create a Blog
  • Newsletter
  • Professional Email
  • Website Design Services
  • Commerce
  • WordPress Studio
  • Enterprise WordPress  
Features
  • Overview
  • WordPress Themes
  • WordPress Plugins
  • WordPress Patterns
  • Google Apps
Resources
  • Support Center
  • WordPress News
  • Business Name Generator
  • Logo Maker
  • Discover New Posts
  • Popular Tags
  • Blog Search
Jetpack App
  • Learn more
  • Support Center
  • Guides
  • Courses
  • Forums
  • Contact
Search
  • Support Center
  • Guides
  • Courses
  • Forums
  • Contact
Forums / Harmonic Theme logo issues

Harmonic Theme logo issues

  • Unknown's avatar
    mirandaostler · Member · Apr 23, 2016 at 8:06 pm
    • Copy link Copy link
    • Add topic to favorites 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.

  • Unknown's avatar
    timethief · Member · Apr 23, 2016 at 9:27 pm
    • Copy link 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.

  • Unknown's avatar
    mirandaostler · Member · Apr 23, 2016 at 9:30 pm
    • Copy link Copy link

    Thank you timethief – I am actually already on the Premium bundle, so I will have a look at CSS!

  • Unknown's avatar
    timethief · Member · Apr 23, 2016 at 9:47 pm
    • Copy link Copy link

    You`re welcome and best wishes.

  • Unknown's avatar
    kathrynwp · Staff · Apr 25, 2016 at 3:18 pm
    • Copy link 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.

  • Unknown's avatar
    mirandaostler · Member · Apr 27, 2016 at 12:49 pm
    • Copy link Copy link

    @kathrynwp Thank you so much! That’s solved it perfectly :)

  • Unknown's avatar
    kathrynwp · Staff · Apr 27, 2016 at 1:39 pm
    • Copy link Copy link

    You’re very welcome, glad you’re set!

  • Unknown's avatar
    mirandaostler · Member · Apr 27, 2016 at 1:43 pm
    • Copy link 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?

  • Unknown's avatar
    kathrynwp · Staff · Apr 27, 2016 at 1:45 pm
    • Copy link 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.

  • Unknown's avatar
    mirandaostler · Member · Apr 27, 2016 at 1:46 pm
    • Copy link Copy link

    Thank you! I’ll have a go.

  • The topic ‘Harmonic Theme logo issues’ is closed to new replies.

Tags

  • Harmonic
  • logo
  • Problem
  • site logo
  • theme

About this topic

  • In: Themes
  • 3 participants
  • 9 replies
  • Last activity 10 years
  • Latest reply from mirandaostler

Couldn't find what you needed?

Contact us

Contact us

Get answers from our AI assistant, with access to 24/7 expert human support on paid plans.

Browse our guides

Browse our guides

Find step-by-step solutions to common questions in our comprehensive guides.

WordPress.com

Products
  • WordPress Hosting
  • WordPress for Agencies
  • Become an Affiliate
  • Domain Names
  • AI Website Builder
  • Website Builder
  • Create a Blog
  • Professional Email
  • Website Design Services
  • WordPress Studio
  • Enterprise WordPress
Features
  • Overview
  • WordPress Themes
  • WordPress Plugins
  • WordPress Patterns
  • Google Apps
Resources
  • WordPress.com Blog
  • Business Name Generator
  • Logo Maker
  • WordPress.com Reader
  • Accessibility
  • Remove Subscriptions
Help
  • Support Center
  • Guides
  • Courses
  • Forums
  • Contact
  • Developer Resources
Company
  • About
  • Press
  • Terms of Service
  • Privacy Policy
  • Do Not Sell or Share My Personal Information
  • Privacy Notice for California Users
DeutschEspañolFrançaisBahasa IndonesiaItalianoNederlandsPortuguês do BrasilSvenskaTürkçeРусскийالعربيةעִבְרִית日本語한국어简体中文繁體中文English

Mobile Apps

  • Download on the App Store
  • Get it on Google Play

Social Media

  • WordPress.com on Facebook
  • WordPress.com on X (Twitter)
  • WordPress.com on Instagram
  • WordPress.com on YouTube

Automattic

Automattic
Work With Us
    • WordPress.com Forums
    • Sign up
    • Log in
    • Copy shortlink
    • Report this content
    • Manage subscriptions