• Welcome to the Chevereto User Community!

    Here, users from all over the world come together to learn, share, and collaborate on everything related to Chevereto. It's a place to exchange ideas, ask questions, and help improve the software.

    Please keep in mind:

    • This community is user-driven. Always be polite and respectful to others.
    • Support development by purchasing a Chevereto license, which also gives you priority support.
    • Go further by joining the Community Subscription for even faster response times and to help sustain this space
  • Chevereto Support CLST

    Support response

    Support checklist

    • Got a Something went wrong message? Read this guide and provide the actual error. Do not skip this.
    • Confirm that the server meets the System Requirements
    • Check for any available Hotfix - your issue could be already reported/fixed
    • Read documentation - It will be required to Debug and understand Errors for a faster support response

3.2.0 logo sizing

solidus

solidus

Chevereto Member
In previous versions I did this to resize the logo, but it no longer works in 3.2.0.
I see this in peafowl.css

HTML: 
        .top-bar-logo, .top-bar-logo img {
            height: 40px;

I've modified height but no change. How can I fix this.
Site: http://gfxf.net (logo is way too small as you can see)

Thanks.
 
What do you mean with custom hooks Rodolfo?

I modified the lib\Peafowl\peafowl css file and was able to change the size just fine 🙂

I changed these:
.top-bar-logo, .top-bar-logo img {
height: 45px;
}
@media (min-width: 992px) {
.top-bar-logo {
margin-top: -10px;
}
.top-bar-logo, .top-bar-logo img {
height: 45px;
Click to expand...

Works fine.. see both my sites below.
 
There is a file in the folder app/theme/Peafowl/custom_hooks that is called "style.css". In that file you should put your custom CSS if you want to work in the default theme and not fork anything.
 
Thnx Rodolfo, so should I copy the lib\peafowl\peafowl css file to this folder with my modified changes and replace the original? Will it then automaticaly use my css?
 
Nope. Your CSS changes must be in custom_hooks/style.css. All of them. Is not just copy peafowl.css to that place, that won't work.
 
Ok I tried this code and used custom_hooks/style.css. On desktop logo position is perfect but on mobile (iphone) it's on the below picture. I mean margin from top isn't fine. If I change the margin and set it for mobile then in desktop it's too high on the header. Check on hostselfie.com
 
You need to edit the @media part too:
Code: 
@media (min-width: 992px) {
        .top-bar-logo {
            margin-top: -10px;
        }
        .top-bar-logo, .top-bar-logo img {
            height: 20px;
        }
    }

This is for screens smaller than 992px.
 
Currently I use this:

.top-bar-logo, .top-bar-logo img {
height: 42px;
}
@media (min-width: 992px) {
.top-bar-logo {
margin-top: -20px;
}
.top-bar-logo, .top-bar-logo img {
height: 42px;

Can you tell me where to change?
 
I checked your style.css and i get this:
Code: 
.top-bar-logo,.top-bar-logo img{height:42px;}@media (min-width: 992px) {.top-bar-logo{margin-top:-20px;}.top-bar-logo,.top-bar-logo img{height:42px;

Check your style.css and if it's the same as the above you need to close the curly brackets {}.
 
You must log in or register to reply here.
Back
Top