Offroad theme logo size

Classic Themes
1

Hi,

I use site logo, but now it is too small.
How I can change max size of logo?

2

Always good to post a url to your site, otherwise it’s hard to help. :slight_smile:

1 Like
3

URL: http://www.vuokonjarvenkesateatteri.fi

I only find this in styles.scss

  .site-logo {
  margin-bottom: $spacer/4;
}

Also I want to add background in navigation menu, but no luck yet :frowning:
Something like here: http://www.w3schools.com/css/css_navbar.asp

4

OK - try this for the logo:

img {
width: 800px !important;
}

Of course you can adjust the 800px to whatever size you want.

Olli, you’re background image file size is 4.1 MB which is way too big and takes a very long time to load. Try optimizing it with http://tinypng.com - it should reduce it to maybe ~ 200-300 kb and the pages will load much faster.

1 Like
5

Ok Thanks!
That seems to work!

I use Squash to reduce background… Is that better now?

Any ideas how to get that navigation background to work?

1 Like
6

Now it works also…

ul {
    border: 1px solid #e7e7e7;
    background-color: #333;
}
li a:hover {
    background-color: #32CD32;
}
1 Like
7

Glad it worked. Yes, the background and page loads much faster now. I think it would also help to run your logo image through Squash.

Good job with the menus!: :+1:

1 Like
8

Thanks! Logo is “Squashed” now also.

9

Now I have problem with pictures…

How I can change default size?
You can see here http://www.vuokonjarvenkesateatteri.fi/rw_common/plugins/stacks/armadillo/media/opaste.jpg
Picture is actually smaller, but after publish it stretches??

EDIT:

That code seems to be reason:
img {
width: 800px !important;
}

How I can change that it only affects site logo, but not other pictures?

10

Hmmm… perhaps this is one for the RW Wizard himself: @kryten :bow:

11

Ok, I remove that:
img {
width: 800px !important;
}

Now pictures are fine, but logo is small again :frowning:

12

try this:

.site-logo img {
width: 800px !important;
}
2 Likes
13

Thanks! seems to work!

I already try this (img missing), so close… :slight_smile:
.site-logo {
width: 800px !important;
}

14

Glade it worked for you. You also may want to add a class to your menu items, otherwise any unordered list or list item will get those colors applied:

.site-navigation-inner ul {
    border: 1px solid #e7e7e7;
    background-color: #333;
}

.site-navigation-inner li a:hover {
    background-color: #32CD32;
}
2 Likes
15

Hi,

Any ideas how to shrink area in navigation and text?

viherrakenne.jpg1135Ă—702 108 KB

16 
#masthead {
    padding: 0 !important;
}

In your Global CSS should do the trick. If you’d like a bit more padding, do something like this:

#masthead {
    padding: 1rem !important;
}
3 Likes
17

Thanks! now that is perfect! :slight_smile:

1 Like