• Resolved gpaladin

    (@gpaladin)


    I have installed Pique theme on self-hosted domain. The same theme is used on my wordpress.com site. The site on www.ads-software.com should look the same as the one on wordpress.com, but I have encountered couple of problems.
    1. Color pallets that are available in wordpress.com version are missing in www.ads-software.com. These pallets control colors for panels and fonts and a lot of other things. In www.ads-software.com version there is only default color pallet. Are there any alternatives?
    2. Color of top panel (using static front page) cannot be changed from default customizer in www.ads-software.com. How to change this?
    3. Due to missing pallets, font colors cannot be changed from customizer. How to change this?
    4. Logo as applied in wordpress.com cannot be applied in www.ads-software.com customizer. How to put logo on the site?

    I am aware that by changing css I can change this, but this as a painstaking way to do it and what will happen when theme is updated.

    I managed to change default fonts by using a plugin. Is there a plugin to make described changes?

    Thank you for your help.

Viewing 15 replies - 1 through 15 (of 16 total)
  • Thread Starter gpaladin

    (@gpaladin)

    Anyone?

    vizzinibathrooms

    (@vizzinibathrooms)

    I’m having some similar issues, and really can’t be bothered delving into the CSS, though that looks like the best option.

    Could you please tell me the plugin you used to change the default fonts? i have managed to change the fonts of the text in the body, but I’m looking to change the fonts of the headers etc?

    I look forward to seeing if anyone has any suggestions or help with CSS for this.

    Thread Starter gpaladin

    (@gpaladin)

    Ok…

    Ad 1. I couldn’t find a easier way to change colours than changing css
    Ad 2. Same.
    Ad 3. Same here…
    Ad 4. By installing Jetpack, logo option appears in theme customizer.

    To change default fonts you can use something called google fonts plugin… there are several. One that I found by typng “font” in search field was one mentioning google and had a lot of downloads.

    To make the other changes I followed the procedure for creating a child theme. Child theme works as a space where you can modify stuff in css and if you do something wrong, you can just delete it. Parent theme is always there as a default. So you have a blank page where you write css code and override parent code. When (if) you update your parent theme your changes from css file don’t go away because they are part of your child theme.

    I am not really comfortable with changing css, but with the use of Firefox inspector I can find the peace I want to change and then I change it first in inspector to see if it works and then copy paste into child theme css.

    The worst part is finding what to change and in how many places in css.

    This is how a non-html-guy-who-googles-a-lot does this.

    Good luck!

    P.S. When changing css in child theme you can see the changes as css changes in inspector. When changing with jetpack (there is css editor in jetpack as well) those changes appear as inline… meaning they are applied in different way… If you want to have all the changes in your child theme css you should probably copy the changes made by plugins to child theme css. I am not sure how to do this confidently. Maybe some experienced users could give some advice.

    Moderator Kathryn Presner

    (@zoonini)

    1. Color pallets that are available in wordpress.com version are missing in www.ads-software.com. These pallets control colors for panels and fonts and a lot of other things. In www.ads-software.com version there is only default color pallet. Are there any alternatives?

    Colour palettes are indeed a WordPress.com-only feature.

    If you could provide a link to your WordPress.com site running Pique I’d be glad to show you the CSS of the palette you used there, if you still need any help with it. It’s in the browser source, in the head section.

    Moderator Kathryn Presner

    (@zoonini)

    I am not really comfortable with changing css, but with the use of Firefox inspector I can find the peace I want to change and then I change it first in inspector to see if it works and then copy paste into child theme css.

    Good for you – this is exactly how it’s done. ??

    For anyone else who might like to start exploring this technique, here are some helpful resources:

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    https://dailypost.wordpress.com/2013/06/21/css-intro/

    https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

    https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    https://thewc.co/articles/view/web-inspector-tutorial

    https://cssworkshop.wordpress.com/

    Also just a note that if you’re only making CSS edits and not touching any other theme files, a child theme isn’t necessary – Jetpack comes with a custom CSS editor module where you can add any necessary CSS overrides. Once it’s active, you can add custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    If you want to have all the changes in your child theme css you should probably copy the changes made by plugins to child theme css. I am not sure how to do this confidently. Maybe some experienced users could give some advice.

    I’d be happy to help but I’m not quite sure I understand – could you explain the issue a little bit more, maybe with an example? You definitely shouldn’t edit any plugin files, as you’ll lose those tweaks every time you update the plugin. You can place plugin CSS overrides in a child theme or custom CSS editor alongside the theme CSS overrides.

    Thread Starter gpaladin

    (@gpaladin)

    Thank you for your comments.

    Chronology:
    Pique theme in wp .com environment. I liked it.

    Pique theme in .org environment. –> Pique-child –> Jetpack –> Ninja forms

    I used child theme because it was recommended by more experienced users because the changes made to css are kept after parent theme update and you can easily have a common theme for multiple sites.

    In pique-child i made css changes and php to load google fonts (PT Sans and Oswald were available in .com… I like original fonts but they don’t show letters ????? consistently with the rest of the letters.) Also here I changed colors for letters and backgrounds.

    Since I found no way to put logo like in .com version I installed Jetpack wich supports this feature together with other nice things it can do. Some changes in css I had to make here as well because jetpack overrides child theme in some parts.

    Ninja forms was next. Some changes for these forms display in css as well to be consistent with the rest of the site.

    So now the bigger part of the css changes is in child-theme and won’t change with the updates. For things I changed in jetpack css editor and ninja forms I don’t know what will happen. I would like to have all changes in one place for clarity and to be sure what happens if something gets updated.

    Thread Starter gpaladin

    (@gpaladin)

    Kathryn, I can PM you with the page details. It is still closed for general public.

    Moderator Kathryn Presner

    (@zoonini)

    It sounds like you’ve done everything right so far.

    I’m staff over at WordPress.com, so I’ll be able to see your site even if it’s set to private – could you provide the link if you’d like me to take a look at the palette and send you the CSS you’ll need to replicate it?

    Thread Starter gpaladin

    (@gpaladin)

    Thanks!

    lindyhopzagreb.com
    lindyhopzagreb.wordpress.com

    Moderator Kathryn Presner

    (@zoonini)

    Thanks – that’s a self-hosted site so I can’t view it, but I found two WordPress.com sites both running Pique under this username:

    1. lindyhopzagreb.wordpress.com
    2. lindyzagreb.wordpress.com

    Which of the two is the one whose colour palette you’d like to use on your self-hosted site?

    Thread Starter gpaladin

    (@gpaladin)

    Oh sorry…

    lindyzagreb.wordpress.com is the one. ??

    Moderator Kathryn Presner

    (@zoonini)

    Thread Starter gpaladin

    (@gpaladin)

    Hi,

    Thanks for the help!

    This is the final result.

    https://lindyhopzagreb.com/

    Still not completely satisfied with red on dark and the way links look but happy enough. ??

    I need to change the font color in the panel 2 to white. how can i do this.

    www,chaplintheband.com

    Thread Starter gpaladin

    (@gpaladin)

    If let say “Thank you Fans” comes from post or page title you can try putting this html where you put your title.

    `<span style=”color: #ffffff;”>Thank you fans</span>

    You can try the same thing with your link if it appears in text and not the title.

    If it is formatted by theme later on, then you would have to make changes in CSS of your theme.

    I did this by using a “child theme” of pique. Child theme is the one you make your changes in and it overrides the parent pique theme.

    From your page I can see that the color comes from h3 heading link. If you make a link out of a plain text and then use span to change size, color and style you could have a white link as big as h3 heading.

    Hope this helps.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Pique theme logo and colors’ is closed to new replies.