This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Creating html and css effect

9 years ago · Last reply by Andrew Misplon 9 years ago

I am working with a client, and am setting up a redo of his site at http://test3.admaticonsulting.com/.

Mainly, I am trying to recreate the grey-boxed section on http://jamesclear.com/.

I am using SiteOrigin Widgets Bundle to build the rows. I also installed Rapidology for opt in forms.

After I watched a youtube video to copy the html and css using firebug, I tried that, it kind of worked as standalone files, but could not replicate it in WP.

What’s the best solution to recreate that grey boxed area using the above mentioned plugins, html and css, or some other solution?

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Andrew Misplon Staff 9 years, 9 months ago

    Hi Eric

    There isn’t a SiteOrigin widget that’ll do that out the box. I’d write your content in a SiteOrigin Editor widget and then style that widget. Try this:

    1. Edit your inserted SiteOrigin Editor widget and click Attributes top right. Insert a class name of your choosing:

    focus-box

    2. Go to Appearance > Custom CSS (assuming you have a Custom CSS plugin like SiteOrigin CSS activated) and insert:

    .focus-box {
        background: linear-gradient(#f9f7f5,#f5f3f1) !important;
        border-radius: 3px;
        box-shadow: 0 0 5px #D5D3D1;
        border: 1px solid #d5d3d1;
        margin: 5% 1%;
        padding: 2%;
        text-align: center;
    }

    Hope that helps. You can of course customize the above values as required.

  2. Eric Admati 9 years, 9 months ago

    Hi Andrew,

    Thank you for the solution. That works great. The client changed him mind, however, if he wants that feature I know it’ll work very well.

  3. Andrew Misplon Staff 9 years, 9 months ago

    No problem :) All the best with your project.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread