Need help? Check out our Support site, then


ADELLE Theme questions - new to CSS

  1. Hello,

    New to CSS, managed to do a few things but would need help with the following to get my blog perfect before posting anything.

    Tried finding answers on the forums, found some, came close for others but now I'm just frustrated and need help :)

    http://rightearleft.wordpress.com/

    1 - The theme has a "ribbon" like shape for menu bar, can I have a straight black bar without the "ribbon ends" instead?

    2 - I would want Futura TP to be the typeface of all my headers, including the menu bar. (Why is it that in the customize section menu headers are under "body text"?)

    3 - Would also want the side menu (recent posts, archives, cat) to be in Futura PT font as well.

    4 - I was able to take out the wiggly bars in the side menu, is there a way to have straight bars instead?

    5 - Is there a way to have a link to Behance on the side along with my FB, Pinterest, Vimdeo?

    6 - How do I take out all pink color (on type) and change it - won't allow me on the "colors" section.

    7 - Can I make body text of post a tiny bit bigger then the "3" that is allowed in the fonts section?

    8 - The circle with the date seems wonky and not perfectly circular, can I change this - when I try and change the type size in it (which helps) it also changes menu header type size ... how can I change them independently?

    These are the questions for now ... any help would be greatly appreciated :)

    Martin

    The blog I need help with is rightearleft.wordpress.com.

  2. Hi Martin,

    1 - The theme has a "ribbon" like shape for menu bar, can I have a straight black bar without the "ribbon ends" instead?

    .navigation-main:before, .site-footer:before, .navigation-main:after, .site-footer:after {
        border: medium none;
    }

    2 - I would want Futura TP to be the typeface of all my headers, including the menu bar. (Why is it that in the customize section menu headers are under "body text"?)

    Menu items are typically done in the same font as the body. They may be styled slightly differently (size, color bold, etc.) but generally not the same as header elements (h1-h6). The following gets you Futura PT in the menu items.

    .navigation-main a {
        font-family: futura-pt-1,futura-pt-2,Lora,Georgia,"Times New Roman",serif;
    }

    3 - Would also want the side menu (recent posts, archives, cat) to be in Futura PT font as well.

    .widget-title {
        font-family: futura-pt-1,futura-pt-2,Lora,Georgia,"Times New Roman",serif;
    }

    4 - I was able to take out the wiggly bars in the side menu, is there a way to have straight bars instead?

    This gives you a black border line at the bottom of each widget that spans the entire widget width.

    #secondary .widget {
        border-bottom: 4px solid #000000;
    }

    If you want the bottom border to be less than full width, I suggest creating an image to replace the existing. Upload it to your media library and then put it into the background image declaration for #secondary .widget such as below.

    #secondary .widget {
        background-image: url("URL_OF_IMAGE");
    }

    5 - Is there a way to have a link to Behance on the side along with my FB, Pinterest, Vimdeo?

    This is not a great solution, but what you could do would be to add the link to your Behance page to the twitter field at Appearance > Customize > Theme Options and then replace the symbol used with a different one. The existing use the Genericons font (not images) and you could replace it with something like a camera icon with the following CSS, but the caveat is that the tool tip that will show up when someone hovers their mouse over it will still say twitter. (Like I said, not the best solution.) Difficult to do otherwise, especially so with a responsive width theme such as Adelle.

    .twitter-link a:before {
    	content: "\f102";
    }

    You might consider adding a Behance image of some sort in a text widget below the social icons.

    Text Widget
    Text Widget Links

    6 - How do I take out all pink color (on type) and change it - won't allow me on the "colors" section.

    This should catch all the pink colored text.

    a, a:visited, .navigation-main li.current_page_item a, .navigation-main li.current-menu-item a, .widget a, #secondary #flickr_badge_uber_wrapper a:hover, #secondary #flickr_badge_uber_wrapper a:link, #secondary #flickr_badge_uber_wrapper a:active, #secondary #flickr_badge_uber_wrapper a:visited, .site-info a {
        color: #00bb1a;
    }

    7 - Can I make body text of post a tiny bit bigger then the "3" that is allowed in the fonts section?

    .wf-active .entry-content, .wf-active .entry-summary {
        font-size: 15px;
    }

    8 - The circle with the date seems wonky and not perfectly circular, can I change this - when I try and change the type size in it (which helps) it also changes menu header type size ... how can I change them independently?

    This gets it very close to circular.

    .post-date {
        border-radius: 60px;
        width: 60px;
    }
  3. Oh man - this has been so much help (and saving me the 600$ a programmer told me it would cost to hire him to do it all). Thank you.

    Most of what you mentioned worked ... the Futura TP type didn't fully work till I went and deleted all the other fonts in your list. With your code it ended up being a serif (Times I think). I still don't know why in the menu bar it's Futura thin, or reg and in the Widget it's bold. But I'm ok with it.

    ---

    A few more notes:

    1 - When I hover over the FB, Pinterest icons it still turns to pink. Is there a way to change the color?

    2 - I find the whole widget area a bit too big, is there a code to change the size of that whole square?

    3 - The circle with the date is still a bit too big, is there a way to change it's size and make it smaller? is there also a way to take out the date - I'd be ok with Feb 2014 (with out the 17).

    ---

    I think after the above I'll be ready to jump start the whole thing, thanks again for the help - much appreciated.

    Martin

  4. 1. Ok, I've taken you from pink to an obnoxious green. :) You can edit the color code as desired.

    #social-networks a:hover {
        background-color: #00dd22;
    }

    2. On responsive width themes such as you are using, most often the content and sidebar widths are set in percentages so they maintain their width relationships as a browser window is narrowed and widened. You can play with the below code. I typically will take and add the same amount, such as taking 4% away from the sidebar and then adding 4% to the content.

    .site-main .widget-area {
        width: 29.4118%;
    }
    .content-area {
        width: 62.7451%;
    }

    3. Replace the first bit in your CSS with this and add the second bit.

    .post-date {
        border-radius: 40px;
        width: 35px;
    }
    .post-date .entry-day {
        display: none;
    }
  5. Very cool ... this is working out.

    Next round of tweaks include me trying to find out a way to:

    ---

    1 - WIDGET: Being able to change the type size of the widget menu headings (RECENT POSTS) but more importantly the body text size (JEFF SMITH’S RASL: COMICS REVIEW). I'm going to try and make them much smaller.

    2 - DATE CIRCLE: Be able to change the type size in the DATE circle, want to make it smaller.

    3 - DATE CIRCLE: Also want to be able to change the typeface inside to FUTURA PT, but a thinner weight in that family.

    4 - MENU: Keep all menu titles in gray, but have the hover in white and when your in the section it stays in white.

    ---

    ALMOST there!

    Thanks again for all the help, much appreciated.

    M.

  6. Hope I haven't discouraged you with all these fine detail tweaks ... thanks again for all the help, which I could buy you a drink or something you basically saved me 500$ the programmer was going to charge me for all this.

    Cheers,
    Martin

  7. **wish** I could buy you a drink that is ;)

  8. 1. Widget titles.

    .wf-active .widget-title {
        font-size: 19px;
    }

    Widget links/content font size.

    .wf-active .widget {
        font-size: 15px;
    }

    2 & 3. Date font size (this can change the circle dimensions also, so you may have to revisit the date circle sizing).

    .wf-active .post-date {
        font-size: 18px;
    }

    4. Menu items.

    .navigation-main li.current_page_item a, .navigation-main li.current-menu-item a {
        color: #FFFFFF;
    }
    .navigation-main li a:hover {
        color: #FFFFFF;
    }
    .navigation-main li a {
        color: #BEBEBE;
    }
  9. Fantastic, It all worked. Many thanks :)

    So I put two posts up and something showed up that wasn't there before. Under my main heading "HOOK: THE LAST VAN STORY" there is "posted in music" ... is is NOT there when I just have my first post up, but pops up on both when I publish my second post.

    ---

    1 - is there a way to make that align with the heading? So The H of Hook and "p" of posted align?

    2 - If so the "posted will need to be a bit higher than it is now under the heading. Is there a way to tighten that up once I have it aligned?

    3 - At one point I saw a line under saying the full:

    "Posted in Music by Martin Dupuis"

    ... but I can't get that back (only posted in music appears). Is there a way to get the full line back?

    4 - Is there a way to have the type in the menu NOT underlined when scrolled over?

    ---

    Cheers,
    Martin

  10. Apart from the above questions - now that I'm posting also found a few things that seem odd:

    When I look at it - on this page the header text for my first post is in black (PETER HOOK: VAN STORIES):

    http://rightearleft.wordpress.com/

    But if I scroll down the header of my second post (RASL: COMICS REVIEW) is in grey.

    But if I go click on it:

    http://rightearleft.wordpress.com/2014/02/27/rasl-comics-review-2/

    It's now black (and has the extra "by Martin Dupuis" underneath that wasn't there on the previous page).

    1 - Is there a way to have the headings stay black all the time?

    Best,
    M.

  11. Ok, it seems that the headings only change when they have been clicked from the widget menu - so that's not the end of the world ...

    If you have a few minutes, let me know if you have any solutions to (I tried a few codes and things observing patterns you already gave me, but I can't figure it out :

    ---

    So I put two posts up and something showed up that wasn't there before. Under my main heading "HOOK: THE LAST VAN STORY" there is "posted in music" ... is is NOT there when I just have my first post up, but pops up on both when I publish my second post.

    ---

    1 - is there a way to make that align with the heading? So The H of Hook and "p" of posted align?

    2 - If so the "posted will need to be a bit higher than it is now under the heading. Is there a way to tighten that up once I have it aligned?

    3 - At one point I saw a line under saying the full:

    "Posted in Music by Martin Dupuis"

    ... but I can't get that back (only posted in music appears). Is there a way to get the full line back?

    4 - Is there a way to have the type in the menu NOT underlined when scrolled over?

    ---

    Many thanks,
    Martin

  12. thesacredpath
    Staff

    1 & 2. Aligning the post metadata (Posted in...) with the post title and move it up:

    .entry-header .entry-meta {
        padding-left: 70px;
        margin-top: -10px;
    }
    .entry-title {
        margin-bottom: 0;
    }

    3. On sites with only a single author/contributor, the author is typically hidden from view and will only show if the site has multiple authors. Making author reappear (with only 1 author).

    .byline {
        display: inline;
    }

    4. Remove underline from menu on hover:

    .navigation-main li:hover > a {
        text-decoration: none;
    }

    ------------

    The entry title, has a "visited" color set in the CSS. To change the visited color to black, add the following CSS.

    .entry-title a:visited {
        color: #000000;
    }
  13. This is all good to go. Everything is set up ... for the first time I tried having some words be a link and it kind of acts funny:

    http://www.factualopinion.com/the_factual_opinion/2012/11/comic-books-are-burning-in-hell-violencia.html

    Under the "CONTEXT" category:

    ... I first heard about Chris Wright on the Comic Books are Burning in Hell podcast (an episode Entitled Violencia!) and picked up his book called Blacklung.

    The link is pale grey and the hover kind of bugs (changes color rapidly).

    Is there a way to have all links (in the body text) be 100% black and then hover is light grey (and doesn't switch color rapidly)?

  14. factualopinion.com is a Typepad blog, and you will need to talk with them about issues with that site.

  15. Hello,

    Sorry - sorry I totally messed up my link here. That i sthe page I am linking TO but the problem is on MY wordpress blog site:

    http://rightearleft.wordpress.com/

    In my text, under the "CONTEXT" category I added a link:

    ---

    ... I first heard about Chris Wright on the Comic Books are Burning in Hell podcast (an episode Entitled Violencia!) and picked up his book called Blacklung ...

    ---

    The link is pale grey and the hover kind of bugs (changes color rapidly).

    Is there a way to control the color of the linked words in the body text (pre hover, and hover) and for it to not switch color rapidly like it does now)? I would want it dark grey when not hovered and light grey when hovered.

    Again, sorry for the previous post + thanks for all the help,
    Martin

  16. I think you have a conflict in some of your custom CSS. I would suggest pulling a, and a:visited out of that and setting them separately such as below. You can of course adjust the colors I've used for demonstration purposes.

    a, a:visited {
        color: #CC0000;
    }
    a:hover, a:active, a:focus {
        color: #00bb00;
    }

    If you wish to limit the above change to post and page content areas only, you can do the following instead.

    .entry-content a, .entry-content a:visited {
        color: #CC0000;
    }
    .entry-content a:hover, .entry-content a:active, .entry-content a:focus {
        color: #00bb00;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic