Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #10056

    Hi, how can I get rid of the blue flag in the blog post. Screenshot: http://farm8.staticflickr.com/7177/6815510432_38583bda61.jpg

    Can I have line beneath the link icon in stead of a blue block?

    #66726

    add this to your custom.css stylesheet in folder /css/ or to the quick-css panel located in your wordpress backend at flashlight->styling:


    #top .blog-meta .primary-background
    {
    background: transparent;
    border-bottom: 1px solid #E1E1E1;
    }

    would do that. however please be aware that the icons I used are white, so if you want to use a white background you would need to replace the icons located in your images/layout folder with darker ones ;)

    Cheers

    Kriesi

    #66727

    Hi guys,

    I used this code to do something similar and it works fine.

    Now, how can I apply the same for the “comments” flag?

    Thanks for your help. Take care,

    Nomar

    #66728

    Hi Nomar,

    I believe you can use this:

    #top .flag {
    background-color:#2d5c88;
    border-bottom: 1px solid #E1E1E1;
    }

    In case, you want to change the color as well you can use this:

    #top .on-primary-color {
    color: #ffffff;
    }

    Regards,

    Mya

    #66729

    Hey Mya,

    Thanks for the code. It didn’t quite worked for me, though.

    If I set the background color of the flag to match that of the site, I can hide it, which is OK, and I can do the same with the border-bottom, but the word “Comments”, which I like to keep, ends up being far away from the divider on the right…

    On the other hand, if I set the background color to “transparent”, the word “Comments” ends up being stricken by the line of the divider on the right. So….

    That brings up some questions:

    1. How can I control the placement, size and color of the word “Comments”?

    2. How can I control the vertical placement and width (left-right) of the “border-bottom” line?

    3. How can I control the vertical placement and width (left-right) of the “divider” on the right?

    Thanks a bunch. Take care,

    Nomar

    #66730

    Hi Nomar,

    Do you have a link to the site so we can take a look at it? I want to make sure we are referencing any css changes you’ve made already correctly and we are on the same page :)

    Thanks,

    Devin

    #66731

    Hi Devin,

    Here are the link:

    http://ebrakstudio.com/CGA/spanish/apartamento-altozano/

    What you’ll see there is untouched, the way it comes in Propulsion. The test I did was here, but I put it back to how it was, because of what I described above. Questions are still the same. Thanks,

    Nomar

    #66732

    Hey Nomar,

    You can modify the classes by adding them to your custom.css or Quick CSS:

    1.

    .flag-text {
    color: #fff;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left:0px;
    margin-right: 0px;
    }

    2. How can I control the vertical placement and width (left-right) of the “border-bottom” line?

    .hr-seperator, .mini-seperator {
    width: 100%;
    top: 50%;
    }

    3. How can I control the vertical placement and width (left-right) of the “divider” on the right?

    .seperator-addon {
    height: 3px;
    width: 70px;
    top: 50%;
    right: 0;
    margin-top: -2px;
    }

    It might take some adjusting to get the effect you are looking for but those are the main classes you would be looking for. Also, you can get rid of the line through comments (after making that background transparent) by using the following:

    .hr-seperator, .mini-seperator {
    display: none;
    }

    Regards,

    Devin

    #66733

    Thanks Devin,

    I’ll try this today. Take care,

    Nomar

    #66734

    Hi again Davin,

    I’m trying your code, and this is what I found:

    1. All it affects is the color of the word “Comments”. Setting different margins value doesn’t change its position.

    2. It works, but it affects the divider both at the end of the blog’s text and at the top of the “Comments” section. Also, making the width % smaller than 100 reveals that it is aligned to the left. I tried several ways, but couldn’t align it to the right. What should I use?

    3. This one works fine. ;o)

    Thanks a lot, take care,

    Nomar

    #66735

    Hi Nomar,

    You may need to add !important to the end of the css attribute you change in order for it to take importance over the built in ones. IE:

    .flag-text {
    color: #fff;
    margin-top: 0px !important;
    margin-bottom: 4px !important;
    margin-left:0px !important;
    margin-right: 0px !important;
    }

    Perhaps it would be easier and less back-and-forth if you told me what you are trying to do instead of just providing bits and pieces of css. There are various things you can do with css but in the end what you are looking for may not be achievable with the direction we are going.

    Regards,

    Devin

    #66736

    Hi Devin,

    I tried that before, but didn’t make any difference. However, I worked my way around it, and I don’t have to mess with it anymore for this particular case.

    I may have not explained it with the right terminology, but I did explain what I was trying to achieve. If you read again my first two posts in this thread, you’ll see it, and you can also see that in my third post I provided the link to that specific page so you could take a look at it, as you requested. Sorry if my explanation and link were not enough. I appreciate your help anyway. Take care,

    Nomar

    #66737

    I’ve been following along on this as it’s relevant to something I’m trying to do. I’m not having much luck. I’d like to flatten out the blog meta/flag setup on the left so it flows across below the title but above the post content. You can see the setup here: http://christiepits.com/wordpress/blog/

    Right now, the details are in the right spot I just can’t figure out how to have the flag set up run across the full width. Then underneath, have the meta details on one line and read “This entry has 0 Comments in News by CPRA” without separation. If you squeeze the site, when it gets to the iphone size, that’s the layout I’m looking for at regular size and ipad size (just the meta/flag thing of course). Thanks for any guidance you can provide. Appreciated!

    #66738

    Hi Nomar,

    I’ll need another explanation as I am not clear on what you are looking to achieve at this point.

    @shelteredinsound – If you could ask your quesiton in a new topic, it will help to make sure don’t get looked over in this thread and help keep the thread from getting even more confusing :)

    Thanks,

    Devin

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Modify flag of blog post’ is closed to new replies.