Modify flag of blog post « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Propulsion

Modify flag of blog post

14 posts from 6 voices

Started 1 year ago by megalex
Latest reply from Devin
This topic is resolved

Tags:

megalex
Member

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?

Posted 1 year ago #
Kriesi
Key Master
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
Posted 1 year ago #
Nomar
Member

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

Posted 1 year ago #
Mya
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
Posted 1 year ago #
Nomar
Member

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

Posted 1 year ago #
Devin
Moderator

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

Posted 1 year ago #
Nomar
Member

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

Posted 1 year ago #
Devin
Moderator
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
Posted 1 year ago #
Nomar
Member

Thanks Devin,

I'll try this today. Take care,

Nomar

Posted 1 year ago #
Nomar
Member

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

Posted 1 year ago #
Devin
Moderator
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
Posted 1 year ago #
Nomar
Member

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

Posted 1 year ago #
shelteredinsound
Member

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!

Posted 1 year ago #
Devin
Moderator

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

Posted 1 year ago #