Need CSS help for a blog

[Albertkinng]

Hi guys,
I use Armadillo for my sites. Great tool for making blogs. I love it.
This time I’m asking help for a personal project. I need to know if it’s possible with CSS that everytime I post something the title will include an icon in front of the title. It can be. Svg or png or whatever. I played a little bit with css assigning attributes to my blog and I ended up creating card like formatting to every post but that’s not what I want to have. I want plain white text and an icon in front of the title.

If any of you can come up with a css code that can help me I will appreciated it 100%

Check my sample page here: Test Blog

[dripple (Heiko / paperclip studios)]

The answer is: yes. But it depends.
There’s the content-Attribute that allows to add content before or after a class. There’s a bit of debate about this property, as it adds content to a design document, but it’s very handy from time to time. I used it often with Font Awesome Icons.

Check out this little explanation:

CSS Content | CSS-Tricks

[teefers (Doug Bennett)]

If you want the same icon on the title of each blog entry (On the sample page you gave) try this:

h1.blog-entry-title::before {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-right: 5px;
    content: "";
    background: url("https://image.flaticon.com/icons/png/512/534/534096.png") no-repeat 0 0;
    background-size: 100%;
}

You just need to change the size (width and height attributes) and the URL to what icon you want.

[Albertkinng]

Thanks! I will try it out!

[teefers (Doug Bennett)]

@Albertkinng Albert,

You also should increase the contrast between the background color (#8db941) and the foreground text color (#fefefe). currently fails the Accessibility (WCAG 1.4.3) guidelines.

Normal font weights should have a minimum expected contrast ratio of 4.5:1, Bold font weights should have a minimum expected contrast ratio of 3:1.

The colors you have only produced an insufficient color contrast of 2.27.

[Albertkinng]

Wow I didn’t knew that! Well, I really want just plain white fonts. The cards and the colors was just me playing around with css to see if I can change anything on the blog thru Armadillo. Any ideas to achieve that? Plain fonts in white?

[teefers (Doug Bennett)]

Nothing wrong with using white text. It’s the green background that isn’t dark enough to give you the contrast.

You can darken the green background, or even lighten the white(not much as you are using #fefefe).

Keeping the same shade of green going with a #5F7D2C for the background would make you pass.

Here is a great little checker, just enter the values for both the text and the background and move the sliders.

WebAIM: Contrast Checker

[Albertkinng]

This is what I’m getting: with logo before header
how can I change the header font and color?
this is my code:

body {
  color: white
}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	
}

h2 {
  font-size: 24px;
}

p {
  font-size: 20px;
}

h1.blog-entry-title::before {
	font-size: 20px;
	font-color: white;
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 8px;
    content: "";
    background: url("https://albertkinng.com/grosella2021/logos/blog_001.png") no-repeat 0 0;
    background-size: 100%;
    padding: 10px; 
	   text-align: left;
	-webkit-border-radius: 4.5px 4.5px 4.5px 4.5px;
	   -moz-border-radius: 4.5px 4.5px 4.5px 4.5px;
	        border-radius: 4.5px 4.5px 4.5px 4.5px;
}

[teefers (Doug Bennett)]

@Albertkinng

This is what I’m getting: with logo before header
how can I change the header font and color?

Looks like you changed the page since I gave you the code. Yesterday you had multiple entries, and the HTML Armadillo produced was different. I tested the code on your site and it worked fine.

I have changed it for the changes, to the page.

Also this code only is strictly for the pseudo-element ::before and will HAVE NO EFFECT ON ANYTHING ELSE. You added attributes font-size, font-color, border-radius etc. that wouldn’t work. You see the content that is being added is content: ""; is empty. the image is being set as a background URL only. There is no reason to apply fonts or border properties to.nothing.

.armadilloBlogHeadlineEntry h1::before {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-right: 5px;
    content: "";
    background: url(https://albertkinng.com/grosella2021/logos/blog_001.png) no-repeat 0 0;
    background-size: 100%;
}

@teefers

You just need to change the size (width and height attributes) and the URL to what icon you want.

Keep the changes to the new code to that. Keep in mind if you make other changes then the code might stop working.

[Albertkinng]

yes! your help pump my creativity and I start restructuring the site, home page will show the latest post and the others will be on archive page. I will try your code now. that code goes on the inspector CSS area too right?

[Albertkinng]

I replace the code with yours but nothing happened… any thoughts?

[teefers (Doug Bennett)]

Albert @Albertkinng,

I can see in the video (darkmode is hard to read) where you put the code.

Looking at the site the new code doesn’t appear to be there. However, the old code I gave you before (with some of those attributes that don’t work text-alignment, border-radius) is still there and working When I hit the detail or archive page.

When I insert the new code on the page in question (developer tools), It works.

So my guess is you didn’t republish or put the code in the right place.

You can also insert code on-line in Armadillo.

[Albertkinng]

In the video you can see I published the page and all the icons disappeared. Then I put the old code again and I got them back.

I think I know how to do it manually because the inspector is telling me css page I need to work with, but I want to do it on RW so I can do it only one time without going to the server to add the code.

I went to Armadillo site but it seems you can add css that affect all blogs. I just need this blog with the icon on header.

I will try again with your code and let you know

[teefers (Doug Bennett)]

@Albertkinng

I went to Armadillo site but it seems you can add css that affect all blogs. I just need this blog with the icon on header.

Not understanding what you are trying to say with “seems you can add css that affect all blog”. Are you using multiple blogs?

Placing the CSS into Armadillo will only affect pages that have Armadillo on them. Plus the CSS rules will only be applied to elements that the CSS selector matches. If you put the CSS in the page inspector or on Armadillo’s online shouldn’t have any impact on the rules being applied.

@Albertkinng

In the video you can see I published the page

I honestly couldn’t tell what exactly you did on the video, but if you did republish and cleared your cache then it should have worked or at least been on the site when I looked at it.

Of course, it could be that there is some other CSS you have that’s creating a conflict or syntax error, but if you keep changing things it’s impossible to help you find the issue.

I’m not going to be near a real computer(only an iPad with zero web tools) for a couple of days so perhaps someone else can help.

I can assure you that the code above works for the page as it stood when I tested it. However, you need to stop the changing of other stuff on the page. I or anyone else, won’t be able to help you with a moving target.

[Albertkinng]

I just changed it once. I haven’t touch the layout then. Just adding and deleting css code trying to see if your code works or not.

I have 4 blogs on armadillo running on 4 different websites. When I post I go to Armadillo select the blog and add my post.

The only css area where you place your code can’t be assigned to a specific blog. That’s what I was trying to explain in my other post.

I will try your code again directly to the css assigned manually on the server without opening RW and see how it goes.

[DLH (Don H)]

@Albertkinng

I will try your code again directly to the css assigned manually on the server without opening RW and see how it goes.

You shouldn’t have to do this. First try putting it in the page’s CSS box. Once you do that and republish, post here and we’ll take a look.

[Albertkinng]

@teefers

.armadilloBlogHeadlineEntry h1::before {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-right: 5px;
    content: "";
    background: url(https://albertkinng.com/grosella2021/logos/blog_001.png) no-repeat 0 0;
    background-size: 100%;
}

it worked! thanks. any paypal address to invite you a coffee?

[Albertkinng]

@teefers I noticed that in responsive mode (when I browse using the iPhone) not of the css styles are applied… thats normal?

[teefers (Doug Bennett)]

No, the code above has no media query connected to it as posted.
So it should still apply to every screen width. What I could make out in your video, it looks like you have other CSS code in place.

Without being able to see all the code you have and whether you might have a syntax error in some other piece of code, Just a missing } on another snippet could easily cause a prior media query not to close.

[Albertkinng]

Here’s the code: