Add a graphic with :after for specific title only?

Posted in: Newsmag
Post count: 32

Can you tell me what CSS to add the graphic https://www.hownottosail.com/wp-content/uploads/2019/04/podcast-arrow.png *only* after the blue “start here” block title for podcast section at http://www.hownottosail.com ? I can get it to work (appearing to the right of the title box, pointing down) for all block titles, but can figure out the selector syntax to choose just that one… Thanks!

Post count: 23312

Hi,

I think that you want to achieve something like that -> https://www.screencast.com/t/ldsHgDUog9 as you can see in our demo. You need to use your Inspector Browser and add your image where you want. Check here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ Notice that is not a simple task and if you are not aware of the steps which are needed to take in this case, please consider hiring a freelancer/developer to help you because we cannot provide custom work at the moment, sorry!

Thank you!

Post count: 32

So, I had a little different thing in mind…and it’s *almost* working, but I’m pulling my hair out here. LOL. https://www.hownottosail.com/wp-content/uploads/2019/04/Pasted_Image_4_16_19__09_15-copy.jpg

It works perfectly in Inspector to say:

.td_uid_7_5cb55c653a7ce_rand .block-title:after {
    content: url("https://www.hownottosail.com/wp-content/uploads/2019/04/podcast-arrow-e1555420046659.png") !important;
}

…but it doesn’t work in Theme Panel CSS.

I *can* get *every* block title to display the arrow after but doing this:

.block-title:after {
    content: url("https://www.hownottosail.com/wp-content/uploads/2019/04/podcast-arrow-e1555420046659.png") !important;
}

…but I can’t get it to work with the specific .block-title only.

I’ve tried both ::after and :after, using double, single, or no quotation marks around URL, http vs https, you name it…

What am I missing here, Catalin? Thanks!

  • This reply was modified 7 years by finester11. Reason: added steps taken
Post count: 23312

Hi,

Please check the following screenshot and try to replicate the same thing from here -> https://www.screencast.com/t/UeAiJ5GI Here is an example for Craft Ideas demo which uses the same image to the block title section.

Hope this helps!

Thank you!

Post count: 32

I appreciate the follow-up, Catalin. But once again, your example is using the image as a background-image: attribute behind the block title, and I need to use the content: attribute along with the :after pseudo-class to place the arrow after the title. It works fine as I showed above if I write the rule generally for all .block-title instances. But I can’t seem to get the selector to work just for that one particular .block-title.

Post count: 23312

Hi,

Unfortunately, this is just a simple example of that. If you want to customize it, you need to do it yourself because this task implies doing such custom works and we cannot provide support for that, sorry! Use the Inspector browser for that, according to our documentation from here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ Usually, we recommend the developers from studio.envato.com

Thank you for understanding!

Viewing 6 posts - 1 through 6 (of 6 total)
The forum ‘Newsmag’ is closed to new topics and replies.