CSS for a styled title

  • sacconi

    (@sacconi)


    2 years, 7 months ago

    In the right sidebar there is a pic with the writing “search and filter”. I’d like to transform “search and filter” in text. So I’d like to know if it’s possible to create a writing with this same style by css (and how can I do it). Then I’ll match text and image using 2 divs, one in relative position, one in absolute position. All this in order to use gettext for this text.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Carlos Bravo

    (@cbravobernal)

    2 years, 7 months ago

    Hi there!

    Assuming there is a widget in that sidebar, you should be able to add that text as HTML.

    If you need the text to be like the image, you may have to add that font to your website. Maybe your template is already providing the font or font uploader, otherwise, this plugin could help.

    And after that, you can use CSS to add a font border.

    color: white;
text-shadow: -1px 0 #289dcc, 0 1px #289dcc, 1px 0 #289dcc, 0 -1px #289dcc;

    Hope it helps!

    Best,

    Thread Starter sacconi

    (@sacconi)

    2 years, 7 months ago

    Ok, I have done something using a shortcode in a widget https://test.sacconicase.com/, now how could I push down the text over the image? By css or have I to modify my function of the shortcode, creating 2 divs? Or both things, that is to say I create 2 divs in the function and then I set a relative and absolute position via css?

    Thread Starter sacconi

    (@sacconi)

    2 years, 7 months ago

    I should make also the second pic (under “SEARCH & FILTER”) as large as the first one on top of the sidebar, I created a div class in the shortcode, div class=”filter”, but I can target the image via css, I used

     .filter { width:100%	}
    Carlos Bravo

    (@cbravobernal)

    2 years, 7 months ago

    Hi!

    This could work:

    <section id="block-4" class="widget widget_block" style="position: relative;margin-bottom: -6px;"><div style="position: absolute;left: 25px;top: 15px;font-size: 2.5em;line-height: 1em;">CERCA &amp; FILTRA</div><img height="100" src="https://test.sacconicase.com/wp-content/uploads/2023/11/cercaefiltra-4.jpg" data-src="https://test.sacconicase.com/wp-content/uploads/2023/11/cercaefiltra-4.jpg" decoding="async" class=" lazyloaded" data-eio-rheight="100" data-eio-rwidth="" style="width: 100%;max-width: 318.5px;"><noscript><img height="100" src="https://test.sacconicase.com/wp-content/uploads/2023/11/cercaefiltra-4.jpg"  data-eio="l"></noscript></section>

    You can of course move all the styles to CSS classes!

    Thread Starter sacconi

    (@sacconi)

    2 years, 7 months ago

    I set 2 divs in the function but I can find the right css to match the relative element and the absolute element, besides the text doesnt want to overlay the pic. I have now

    div.filter{
    position:relative;
}
div.textsearch {
  position: absolute;
  top: 190px;
  left: 1200px;
  width: 200px;
  height: 545px;
  font-size:30px;
  font-weight:bold;  
}

    css should work for all the screen widths

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS for a styled title’ is closed to new replies.

Tags