Help with some design elements

  • Unknown's avatar

    Hi! I have been searching and cannot find how to change the following on my blog, please let me know how or if not possible, let me know too. I have the eventbrite single theme. Thanks!

    1) On my front page where all my posts go, can I change the title of each post to a bigger font and bolder than the other text.

    2) Where it says “posted on” for each post, can we take that out and just leave the date? Maybe even make the date a faded color.

    3) After “posted on” on each post it sometimes says when I updated it. Can I take out the “updated on” completely? Not sure I care if people know when it was updated.

    4) Can I change the color of text (I saw the color palette under customize but can’t see an option for body text color, in fact I can’t really get the title text color to change because the color I pick does not come out correctly on the actual title)

    5) Can I change the color of the rectangular section that has my menus? It’s a dark grey right now and would like to change it

    6) For my follow blog widget, can I make the title bigger than the optional text?

    7) Can I create a favicon?

    Thank you in advance for all your help!

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

  • Unknown's avatar

    1. Post title: edit the % font size in the following.

    .event-text h3 {
        font-size: 170%;
    }

    2. Add this to get rid of posted on and keep the date.

    span.posted-date {
        visibility: hidden;
    }
    
    span.posted-date a {
        visibility: visible;
        float: left;
    }

    3. Get rid of update date:

    .updated-date {
        display: none;
    }

    4. The main setting for the content text would be here:

    body {
        color: #666666;
    }

    Color for the post titles would be here:

    .event-text h3 a {
        color: #333333;
    }

    5. To change the background color of the nav, add the following and adjust as desired.

    nav a, div.menu a {
        background: #3B3A3A;
    }
    
    nav, div.menu {
        background: #3B3A3A;
    }

    6. This does the blog subscription widget title only. Adjust as desired.

    #blog_subscription-2 h2 label {
        font-size: 120%;
    }

    7. To add a favicon (called a Blavatar or blog avatar here at WordPress.com) see this support page.

  • Unknown's avatar

    Wow, thank you! I am having trouble on the color ones though (4 & 5). Also is there a way to add the comments box under each post in the infinite scroll home page versus just having the comments show up only if they click on the post?

  • Unknown's avatar

    Hi, and before I forget, great domain name… veggiesdontbite.

    What problem are you having with navigation colors? If you let me know what color you want things, and when (hover, current page item, non-hover, I can help get you exactly where you want to be.

    The only theme here that has the option of comments on the main page is P2, which is a collaborative type of theme (we use a modified version of it internally for our team blogs).

    Comments on the main page can become unruly if you get a lot of comments on a post or two or ten because it increase the page length and load time considerably and causes a lot of scrolling to get to the next post.

  • Unknown's avatar

    Hi, thank you! This is all brand new for me, so forgive me for all the questions. I had no prior web building or computer programming skills before two weeks ago!

    I found the list of CSS colors and am playing around with them. Here are a few more things I’d like to change:

    1) Can I have all the things that are now a dark orange (links, those little lines under the widget titles, etc. ) be the same orange as the color of my post titles, I changed them to this color FF8C00

    2) Exception to 1 above is the post date color, I’d like it 9ACD32

    3) Can I have the color of the drop down sub menus under each menu the same orange as my post title, FF8C00? And also can I change the color when I hover over each menu and submenu to the same as the date color I want 9ACD32

    4) Is there a way to change how many old posts it goes down when you infinite scroll before it displays the next page option? I tried a few other themes that would keep the most current post as large but have the older ones in smaller boxes underneath but couldn’t seem to find one that did this exact thing.

    5) Is there an option for the social media widgets to just be the square symbols of each on the side column like they are under each post? Like maybe have them in a horizontal line under the follow me by email widget? That way they don’t take up so much room on the side column.

    Ok, I think that’s it for now. My logo should be ready soon and then I’ll be able to upload it onto the header. It’s those same three colors I have on my page, turquoise, orange, green. Hope they match what is available here!

    Thank you again for all your help. I definitely picked the right place to start this blog/business!

  • Unknown's avatar

    Oh, one more thing,
    6) How do I check that my background turquoise is that same as the turquoise I set my menus to be?

  • Unknown's avatar

    1 & 2

    a, .sidebar .widget h2:after, .sidebar .widget li span {
        color: #FF8C00;
    }
    
    a:focus, a:hover {
        color: #FF8C00;
    }
    
    span.posted-date a {
        color: #9ACD32;
    }

    3. Orange background on drop downs and green background on hover

    nav li ul li a, div.menu li ul li a {
        background: #FF8C00;
    }
    
    nav li ul li a:hover, div.menu li ul li a:hover {
        background: #9ACD32;
    }

    4. No, with infinite scroll it is set to load 7 each time a visitor scrolls to a certain point near the bottom.

    5. Yes, you can put the linked social icons into a text widget. See the following two support documents on how to do that.

    Text Widgets
    Text Widget Links

    6. I used the web inspector in Firefox to find the background color code and the color code for the menu and found the following.

    Background: #5AD0D2
    Menu background: #00CED1

    You can either change the background color (paste the code into the background color field at Appearance > Background) or change the nav background color in your CSS (nav a, div.menu a).

    If you have not gotten familiar with the web inspector in your browser, take a look at our How to Find Your Theme’s CSS support page which has some brief screen casts to get you going on using it. It is an invaluable tool when doing CSS changes.

  • Unknown's avatar

    Awesome! Thank you, I will play around today.

    How do I change the color for my blog title?

    Also, do you know how I can choose which picture the blog uses to share on Facebook when I publicize as I publish my post?

  • Unknown's avatar

    To change the color of the blog title, add this and replace 123456 with the hex for the color you prefer:

    header .logo-text h1 {
    color: #123456 !important;
    }

    The FB question isn’t a CSS issue: search the Support forum please.

  • Unknown's avatar

    Hi there, I am moving along…

    1)How do you change the color of the tagline below the site title? All of a sudden I can’t even see it?

    2) Also, is there a way to get the logo I upload to be centered large at the top instead of small to the left of the title? I ultimately don’t want anything for the title but want to keep the tagline underneath then upload my logo up top above the tagline.

    Thank you and happy thanksgiving!

  • Unknown's avatar

    Hi there, you can change the tagline color by adding the following and editing the color code as desired.

    header .logo-text h5 {
        color: #cc0000;
    }

    You can add a header image (1280px x 228px) at Appearance > Header and choose to hide the title/description text. You can incorporate the tagline into your header image.

    Alternately you can add the logo to the site title div within the CSS with something like this.

    header .logo-row {
        background: url("URL_OF_IMAGE") no-repeat scroll center top rbga(0, 0, 0, 0);
        height: 150px;
        text-align: center;
        width: 100%;
    }
    
    header .logo-text h1 {
        color: rbga(0, 0, 0, 0);
    }

    The height should match the height of you logo image. Some adjustment will likely be needed for the site description text.

  • Unknown's avatar

    Great thanks. I’ll try the CSS for changing tagline color because right now changing it under the color tab in customize is not working. For some reason it won’t change it. Not sure why…

    How do I incorporate the tagline into my header image? I know how to upload the image through the appearance menu.

    In the css you gave me as an alternate idea, how do I get a URL of my image if it is just a file on my computer? It’s the file of the logo my logo girl designed for me. I have it as a few different file types but don’t know how to get a URL.

  • Unknown's avatar

    a) “You can incorporate the tagline into your header image” means you can design a different version of the logo image, with the tagline in it.

    b) To get a URL you upload the image from your computer to your blog via Media > Add New, click Edit, copy its URL from the File URL field of the Save module.

  • Unknown's avatar

    Hi, my tagline is not showing. I tried adding the CSS you sent with the color code I want and it still doesn’t show. Can you check it out?

    http://www.veggiesdontbite.com

  • Unknown's avatar

    Ok, so just checked it separately on a browser and the tagline shows. But it doesn’t show on the customize page from my dashboard…weird

  • Unknown's avatar

    Ok, now it shows. I guess it takes some time to load.

    I am now trying to play with the CSS to add my logo via that way and I can’t seem to get it to work. I found the url from the edit menu and put it where it said but it’s not showing…any ideas why?

  • Unknown's avatar

    I have tried everything and can’t get my logo up centered using the CSS you gave. Please help. I can’t upload the logo into the header because it makes me crop it and most of it doesn’t show. I have tried putting the URL in and you can see how it looks by going to my site…there is a giant white hole in the middle where I’m guessing the logo should show up but it doesn’t. I can delete the title at the top, but keep the tagline at the bottom as it sits right now, and if I could get this logo to show up it would be perfect!

  • Unknown's avatar

    At the moment you’ve got this in your CSS editor:

    header .logo-row {
        height: 150px;
        text-align: center;
        width: 100%;
    }

    You’re missing the whole line where the image URL should be inserted. Check thesacredpath’s reply above.

  • Unknown's avatar

    I did that…it doesn’t work. Check it now.

  • Unknown's avatar

    I even changed the size to match the image…

  • The topic ‘Help with some design elements’ is closed to new replies.