Eventbrite Single Event: pushing the logo to the right

  • Unknown's avatar
    annediam · Member ·

    Hi guys,

    I’m trying to put the logo in the header to the right in the Eventbrite Single Event theme.
    Everything I’m trying in CSS does not work (seems like a lot of CSS customization options working in other themes are not available with the Eventbrite theme, it just does not respond).

    Do you have another magic CSS formula? I do not wish to move the entire header, I just want the text aligned on the left with the menus, and having the uploaded on the right.

    Thanks for your help!
    Anne

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    justpi · Member ·

    One possibility: 

    header .logo-row {
    display: block;
    text-align: right;
    width: 100%;
}
header .logo {
    display: inline;
}
header .logo img {
    margin: 0;
}
header .logo-text {
    float: left;
    margin-top: 24px;
}

    A note on your background image:
    The theme is centered in relation to the browser window, so the left bg area doesn’t have a fixed width. Drag the browser window to make it narrower and see how it will look different to different visitors.

  • Unknown's avatar
    annediam · Member ·

    Hi! thanks a lot, worked perfectly ;)

    About the bg image: I know, it sucks… I’ve tried to make the theme itself transparent, like I did in another blog – see http://nytesyte.net/, where I used:

    body.custom-background {
    background-size: 450px 100%;
    }

    but the Eventbrite theme here doesn’t respond to this – which makes sense in a way because the Eventbrite info box will appear once the event itself is published on Eventbrite.
    I’m working on a new background design where this won’t happen anymore. The blog is still in early stages ;)

    Thanks again a million for your help!

  • Unknown's avatar
    justpi · Member ·

    You’re welcome.
    You can easily make the theme transparent, but I don’t think this is the best solution – at least not with the current bg image.

  • Unknown's avatar
    annediam · Member ·

    Yeah, transparency is a complex thing ;)
    How could I make it transparent (with another bg image) just in case?

    I tried
    #page {
    background: transparent;
    }
    Like I did on the other blog I mentioned above – not working with this Eventbrite theme (sorry, I pasted the wrong bit of CSS in my post above).

    Thanks and have a great weekend! ;)
    Anne

  • Unknown's avatar
    justpi · Member ·

    Each theme has its own structure and its own selectors, so a code that works on a theme won’t work on a different theme. To make the content area transparent you need this: 

    .main-container .container {
background-color: transparent;
}

    Or maybe you can add a faint semi-transparent bg to it: 

    .main-container .container {
background-color: rgba(240, 240, 240, 0.7);
}
  • Unknown's avatar
    annediam · Member ·

    I see – sorry, still a beginner in CSS, I just started training but only had 3 modules so far, so… ;)
    Thanks a lot – the faint semi-transparent bg is a brilliant idea. I went for that one using a background image taken from the actual logo. Looks much better on small screens too.

    Thanks again a million for your help!

  • Unknown's avatar
    justpi · Member ·

    You’re welcome!
    Yes, much better now: more elegant, and with this bg image it doesn’t matter where it shows or how much of it will show.

  • Unknown's avatar
    annediam · Member ·

    Yep, agreed!
    Sorry to bother again – I have a couple more questions actually :p

    If, say, I want to remove transparency for just one page (for example that one: http://medical-translators-conference.com/contact/contact-us/) – so make it plain, how do I do that in CSS (using the page ID I assume).

    How can I make the site title bigger/smaller? (not working in the Fonts menu, despite my cstom upgrade)
    And likewise, how do I make the subtitle bigger?

    Last but not least: is there a way I can chang the font of the site title only, without it changing all the headings as well?

    Thanks… and sorry p ;)

  • Unknown's avatar
    justpi · Member ·

    a) Yes, you use the page ID. But I’m nor sure what you mean by “remove transparency”. If you mean make the light grey rectangle fully opaque, add this: 

    .page-id-61 .main-container .container {
background-color: #F0F0F0;
}

    If you mean eliminate the rectangle, write “transparent” in place of “#F0F0F0”.

    b) To change the font family of the blog title, and the font sizes of the title and the tagline, add this and change the font name and the values: 

    header .logo-text h1 {
font-family: Georgia !important;
font-size: 3.5em !important;
}
header .logo-text h5 {
font-size: 1.1em !important;
}

    PS “Sorry”? This forum is for asking questions!

  • Unknown's avatar
    annediam · Member ·

    Well, yeah, but I hate to ask too much and stealing your time and skills! ;)
    Thanks a lot, it’s all working just fine – you rock! :)

  • The topic ‘Eventbrite Single Event: pushing the logo to the right’ is closed to new replies.