Help with ‘Div Style Background / Widget Custom Code’ Homepage Styling

  • alexandraqb

    (@alexandraqb)


    5 years, 10 months ago

    Hello,

    Currently I am trying to add a Background Color, and/or a Background Image within a DIV.

    My current code ‘almost’ works yet throws errors, stating ‘Special characters must be escaped’
    Below is the code I am using, which I plan to place in a ‘custom HTML’ widget.

    <div style="background-color:#cccccc; position:absolute; left:0; right:0; class="shes-widget-full">	
<br>Welcome to.
<br>
<br>Website details here.
<br>
</div>

    If I remove the ” from the top line the errors go away, however the code no longer works as desired.
    I would like the DIV and background color or image to span the entire width of the page.

    Sorry I do not know all of the technical terms regarding WordPress, I’m still very much learning.

    Currently I’m using WordPress, with Woocommerce, Storefront theme, all plugins and my website is fully updated to the newest current version.

    Any help would be greatly appreciated as this seems to be one puzzle I cannot fix.

    If possible I do not want to install anymore Plugins, in order to achieve this styling.

    Thank you for reading.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Rabeah Abbas

    (@moonsloth)

    5 years, 10 months ago

    <div style="background-color:#cccccc; position:absolute; left:0; right:0;" class="shes-widget-full">	
<br>Welcome to.
<br>
<br>Website details here.
<br>
</div>

    That should do the trick.

    You were nearly there! when you inline style an element, the correct syntax would be style="" you forgot the closing quotation mark after style

    RossMitchell

    (@rossmitchell)

    5 years, 10 months ago

    I think you mean:
    <div class="shes-widget-full" style="background-color:#cccccc; position:absolute; left:0; right:0;">
    And maybe the doublequotes need to be escaped with the backslash character in which case it would become:
    <div class=\"shes-widget-full\" style=\"background-color:#cccccc; position:absolute; left:0; right:0;\">

    Also when I am experimenting like you are I make the colours absurd and unmissable, then once the colours are in the correct place I make them realistic.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Help with ‘Div Style Background / Widget Custom Code’ Homepage Styling’ is closed to new replies.