Offroad theme logo size


(Olli Ovaskainen) #1

Hi,

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


How do I make site logo larger in Theme
(David) #2

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


(Olli Ovaskainen) #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


(David) #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.


(Olli Ovaskainen) #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?


(Olli Ovaskainen) #6

Now it works also…

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

(David) #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:


(Olli Ovaskainen) #8

Thanks! Logo is “Squashed” now also.


(Olli Ovaskainen) #9

Now I have problem with pictures…
http://www.vuokonjarvenkesateatteri.fi/yhteystiedot/

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?


(David) #10

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


(Olli Ovaskainen) #11

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

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


(Doug Bennett) #12

try this:

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

(Olli Ovaskainen) #13

Thanks! seems to work!

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


(Doug Bennett) #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;
}

(Olli Ovaskainen) #15

Hi,

Any ideas how to shrink area in navigation and text?


(Simon Maddox) #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;
}

(Olli Ovaskainen) #17

Thanks! now that is perfect! :slight_smile: