Change a Font Color, Move the Blog Search

  • Unknown's avatar
    endthread · Member ·

    Hi,

    I’d like to change a font color in the Avid theme that I’m not seeing access to with the Custom Design upgrade.

    It’s the dark yellow of the words “Share” and “Like this” at the bottom of every post on my blog.

    Here’s an example: http://endthread.com/2013/10/30/video-test/

    How can I change that font color, and the font itself if desired?

    To go one step further, is it possible to change the grey box that surrounds the Facebook, Twitter, etc, symbols to another color?

    Second question: The Blog Search for the Avid theme is at the top of the homepage and throws off the symmetry of the theme’s style. Is there a way to move it to the bottom of the homepage?

    Here’s a visual example of the current placement of the Blog Search (I have mine disabled, hence this link to another Avid themed site instead): http://exploratorius.us/

    Thanks

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, for the font styling for Share and Like this, add the following and edit as desired. I included a number of typical style declarations. Remove any declarations below, that you don’t use.

    div.sharedaddy.sd-sharing-enabled .sd-title, div.sharedaddy.sd-like-enabled .sd-title, .sd-like-count {
    color: #cc0000;
    text-shadow: none;
    font-family: Times New Roman, Georgia, serif !important;
    font-size: 150% !important;
}

    On the share icons background, add the following to take it away.

    div.sharedaddy a.sd-button {
    background: none;
    box-shadow: none;
    border: none;
}

    Thanks a lot for the link to the example on the search box. I’ll offer two solutions for you. If you narrow your browser window down, you will notice that at a point (900px width) the search box/RSS icon element goes full-width at the top. The following will make it full width for above 900px also and works cleanly all the way down to 320px (smartphone portrait orientation).

    @media screen and (min-width: 900px) {
  .index-box {
    float: none;
  }
}

    This move the search/RSS down to the bottom and takes it full-width below the “older posts” button. 

    .blog .no-sidebar {
    position: relative;
}

.blog .index-box {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 97%;
}

.blog #loop-container {
    margin-bottom: 150px;
}
  • Unknown's avatar
    endthread · Member ·

    Excellent! Those worked like a charm. Very helpful, thank you.

    This brings me to a couple new questions:

    With the Search/RSS at the bottom, there’s now two RSS links down there: the one that accompanies the search box ,and the theme’s default one in the center. Is it possible to hide/remove one?

    Second, I’ve changed the background from black to white, and certain borders disappeared:

    The thin horizontal lines encasing the categories are no longer visible – how can I change them to black?..and change the bottom dotted line to a solid line? (see demo link below for a visual).

    The vertical line in between the post boxes is no longer visible, either (nor the box around the search/RSS). Possible to change that line to black? You’ll notice as well (on the demo site) that there are ‘dots’ down the middle accompanying the vertical line. Is there a code to change the color of those dots?..so that they always show, whether a light or dark background?

    Here’s a link to the demo site (dark background) for reference of the borders and dots: http://aviddemo.wordpress.com/

    Thanks again

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, for the RSS in the footer, add the following to hide it.

    nav.social .rss {
    display: none;
}

    If you are talking about the line above the categories at the very bottom of a post, add the following and edit as desired.

    .post-footer-content:before {
    border-top: 1px solid #333333;
}

    This is the line between the post content and the comments section.

    #comments {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

    The border between the columns of images on the main page is a combination of three images. A very small top and bottom image, and a repeating 4px square image between the two.

    Top tiny bit:

    .blog-wrapper:before {
    background: url("images/bg-timeline-start.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

    Top image URL: http://s1.wp.com/wp-content/themes/premium/avid/images/bg-timeline-start.png

    Middle repeating bit:

    .blog-wrapper {
    background: url("images/bg-timeline.png") repeat-y scroll center center rgba(0, 0, 0, 0);
}

    Middle image URL: http://s1.wp.com/wp-content/themes/premium/avid/images/bg-timeline.png

    Bottom tiny bit:

    .blog-wrapper:after {
    background: url("images/bg-timeline-end.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

    Bottom image URL: http://s1.wp.com/wp-content/themes/premium/avid/images/bg-timeline-end.png

    The top and bottom are sort of rounded top/bottom images. For the top and bottom, you can turn the background declaration to this but you lose the rounded top to the line:

    background: #000000;

    The above shortcut won’t work on the middle part of the line. You would have to create a new 4px x 4px black image and then replace the relative image URL in the declaration with the URL of that image, which you uploaded to the media library.

    The little triangles at the inside edge of each post on the main page is also an image. It is a 7px wide by 12px image with a transparent background. Here is the existing CSS for that.

    article.post .pointer {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAQAAAAEnG+bAAAAcElEQVQI12OQd/rPgIAM8n/k85G5/xX+S8+X54RyFf/L/Zf9r3BSVg7MVQZyFYECcs9lbMCyIHmQFvmfCmlgrgqQo/Jf9qd8JgOIowKUlX0uYw9WrPxf6b/8GTmIUQogXUvlYBYp/JErRXKGrCuyIwH7fE9/zNGKcAAAAABJRU5ErkJggg==") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

    If you want to create your own image, create a 7 x 12 image with the triangle, save it as a PNG image with a transparent background and then add the following to your CSS and replace URL_OF_IMAGE between the quote marks with the URL of your uploaded image.

    article.post .pointer {
    background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
  • Unknown's avatar
    endthread · Member ·

    Hey, thanks for the RSS code.

    Sorry, I should of been more clear about which category lines I was asking about. I made an image to explain myself better: http://wp.me/aMkfv-2ih

    For the lines in between the posts on the main page, I saved the tiny top, middle, and bottom images, uploaded them to my media library, entered the CSS code, but nothing happened. I created my own as well to see if that would do anything, but still nothing appeared. What am I missing ?

  • Unknown's avatar
    thesacredpath · Member ·

    Thanks a lot for the great screenshot.

    The circle is part of the triangle image which I referenced above (I had missed that the circle was there also):

    article.post .pointer {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAQAAAAEnG+bAAAAcElEQVQI12OQd/rPgIAM8n/k85G5/xX+S8+X54RyFf/L/Zf9r3BSVg7MVQZyFYECcs9lbMCyIHmQFvmfCmlgrgqQo/Jf9qd8JgOIowKUlX0uYw9WrPxf6b/8GTmIUQogXUvlYBYp/JErRXKGrCuyIwH7fE9/zNGKcAAAAABJRU5ErkJggg==") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

    I downloaded the image and you can pick it up here for reference when making your new darker copy of it: https://i.cloudup.com/hjKCwMJbV0-3000×3000.png. After making the new image and uploading it to your media library, put the URL of that image into the following in your custom CSS where it says URL_OF_IMAGE between the quote marks.

    article.post .pointer {
    background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

    Now on to the other things. What I’m doing is using the web inspector in my browser to show me what CSS rules are being applied to the specific elements. If you have not yet made friends with the web inspector in your browser, take a look at the brief screencasts in our How to Find Your Theme’s CSS support page. The web inspector will make it much easier to work on your theme’s CSS.

    Menu borders are done with an rgb color with an opacity. The first three numbers are the RGB color values and the last (0.15) the opacity. 1 would be completely opaque and 0 completely transparent.

    nav[role="navigation"] {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

    On the line between the posts on the main page, there are 3 states:

    1. 1140px and wider browser window width
    2. 900px to 1140px width
    3. Below 900px

    Above 1140px window width, two columns of images and the dot/circle and triangle are present and the following is the css that controls. I’ve changed the color codes to black and changed the opacity from 0.18 to 0.4.

    @media screen and (min-width:1140px) {

.blog-wrapper div.timeline {
background-color:rgba(0, 0, 0, 0.4);

.blog-wrapper div.timeline.last {
background:-moz-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(0, 0, 0, 0)));
background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
background:-o-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
background:-ms-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
background:linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e000000', endColorstr='#00000000',GradientType=0 );
}
}

    At between 1140px and 900px window width, two columns of images, the dot/circle disappears, but the triangles remain between the columns of images and the following is the CSS that controls the line.

    @media screen and (min-width:900px) and (max-width:1140px) {

.blog-wrapper {
background:url(images/bg-timeline.png) center repeat-y; }

.blog-wrapper:after {
background:url(images/bg-timeline-end.png) no-repeat;
}

.blog-wrapper:before {
background:url(images/bg-timeline-start.png) no-repeat;
}
}

    Here are the three image URLs you have to recreate for the 900 to 1140 section above:

  • Unknown's avatar
    endthread · Member ·

    For whatever reason I just can’t get the menu lines or dots to appear on a white background. I made new images, uploaded them, added the CSS with the URL of the images, etc.

    For the time being, I’ve switched to a black bg where at least the menu lines and the line down the middle appear by default (they appear on anything but white, actually). I was able to change the dashed menu line to a solid line, so that’s good. Thank you.

    Is it possible that the center line and the dots can’t be changed with custom colors enabled? I found a thread from last year in the Avid support forum regarding the dots and came across these staff answers:

    When integrating Avid with WordPress.com’s custom colors, we decided to remove the “dots” when custom colors were activated. This was done because the “dots” are an image that can’t change color to reliably match the custom colors you choose.

    It’s something that we’d like to fix down the line, but for now the dots will simply be hidden when you choose a custom color template. I’m sorry for the hassle – just let us know if you have any further questions. Thanks!

    This asset you’ve described has two parts: the timeline disc and the post pointer. It’s because of the post pointer that we cannot currently display this graphic when Custom Colors is enabled.

    I understand and agree this is not ideal. I’ve filed a ticket, and we’ll be sure to investigate into a suitable solution. We don’t know, however, when or if we’ll be releasing a fix for this issue.

    It’s code, there’s a way and you’ve provided it, I figure I’m just missing something. Unless it’s possible they just won’t work with custom colors and the theme will override whatever I do.

    I know I’ve asked quite a few questions (thank you again for all your help) and hopefully these are my last:

    Since I can’t get the dots (circles) to work right now, how can I hide/remove all of the pointers (triangles)?

    How can I change the font color of the categories in the menu on the main page? I tried the following CSS to no avail:

    nav[role=”navigation”] {
    color: #ffffff;
    }

    How do I keep a background image fixed during scrolling? I’ve tried a few codes, including:

    body {
    background: url(“url_of_image.jpg”);
    background-repeat: no-repeat;
    background-position: center;
    }

    but none have worked. Thanks a million.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, I took a look in your media library and see this image, http://endthread.files.wordpress.com/2013/11/bg-timeline-pointer1.png , is that the one you prepared for use? Does that one have the circle too or just the pointer? If I have the URL of the image, I can work with it and see if I can get it to work with a light background.

    I think the threads you mention are talking about are working only with custom colors and not CSS.

    If you can give me links to the images, or upload them if you have not, I can then set up one of my test blog and work through it.

  • Unknown's avatar
    endthread · Member ·

    Hey, I’ve put the images in my media library. Pointer1.png was just me testing red. Let me know how else I can help. Thanks

  • Unknown's avatar
    endthread · Member ·

    And as far as the circle goes, I haven’t made one yet since I couldn’t get the others to work.

  • Unknown's avatar
    endthread · Member ·

    I’ve added a circle and pointer with circle.

  • Unknown's avatar
    thesacredpath · Member ·

    Great, much thanks. I’ll work with those shortly and see what I can come up with.

  • Unknown's avatar
    designsimply · Member ·

    I looked at http://endthread.com/ and I see it’s currently using the Bexley theme. Is that URL of the blog you’re working on? Did you switch away from Avid?

  • Unknown's avatar
    endthread · Member ·

    Hi,

    That’s correct, I switched to Bexley at the end of the month.

  • Unknown's avatar
    designsimply · Member ·

    Okay, I’m going to mark this thread as resolved in the forums since you’ve switched themes. If you need further help, please start a new help request.

    I hope you love the Bexley theme! http://endthread.com/ looks awesome.

  • The topic ‘Change a Font Color, Move the Blog Search’ is closed to new replies.