Need an background element with rounded corners on pages!

  • snupijenta

    (@snupijenta)


    12 years, 1 month ago

    Hello everyone!

    I really hope someone can help me with this…:

    I have downloaded a theme from eleganthhemes.com, that I have changed a lot, after the wishes of the company that I make the webpage for. Everything looks great now, and the website seems to be finished pretty soon.

    But then the manager came with another request: he want´s the background on as well as every page to appear as a grey box with rounded corners, with the same width as the header, and of course to adjust after how much text and phots there are on every page…

    I have tried SO MUCH to get this, but I just cannot figure it out. And as a NEWBIE to this, I find it so complicated right now…:(

    A friend of mine sent me theese html-codes:

    [Code moderated as per the Forum Rules. Please use the pastebin]

    The only change is that the background gets dark grey instead of black, but no grey box appears with text in it.

    I also tried to add all the code in one page, but nothing but the text that my friend wrote, appears….

    I thougt that I would have to do it this way:

    -make an image called content-bg-top (or something like that) with rounded corners, and the shadow that my client loves, to place on top of the page, UNDER the header and page title…

    -add a 1×1 px content-bg to repeat in the width of the header, under the content-bg-top, and as far as the text is…

    -add an image called content-bg-bottom to end the page

    -and someway add borders for the content-bg, so that it looks swell.

    But is this the way to do it? And HOW do I do it, if this is the solution?

    Pleeeease help me someone, I´m desperate, and I have a deadline…:(

Viewing 4 replies - 1 through 4 (of 4 total)
  • PremiumWP

    (@premiumwp)

    12 years, 1 month ago

    You need to style the relevant elements in your style sheet (style.css) to achieve the look you want, not just dump those style attributes into your CSS file anywhere.

    Without knowing your theme, a link to your site etc. no one can help you.

    Also as you are using a commercial theme you really need to seek support from the vendor. ElegantThemes have a dedicated support forum for their themes and will be able to help you with your customizations.

    Good luck

    Thread Starter snupijenta

    (@snupijenta)

    12 years, 1 month ago

    Okey.

    I did hide the webpage, because my client doesn´t want it to appear before it´s finished, -there are customers that wont find the information they need in this page and so on…
    But now I have activated it again so that you can take a look:

    http://sea-tek.no/wordpress

    The theme is called DeepFocus, from elegantthemes. I´ve allready posted a thread in their support, but no-one has given me any solution yet…

    You say;

    You need to style the relevant elements in your style sheet (style.css) to achieve the look you want, not just dump those style attributes into your CSS file anywhere.

    I´m not sure what you mean? Is it that there´s supposed to be a html-file somewhere with the codes, and that css is only supposed to style this? I can´t find any html, I only have files ending with .php and .css…

    And I´m new at this.. so there is much I don´t understand yet…

    Thread Starter snupijenta

    (@snupijenta)

    12 years, 1 month ago

    WOOOOHOOO!!

    I solved it!

    This is what I did:

    I went to page-full.php and wrapped the allready existing code
    <?php the_content(); ?>
    like this:

    Code:

    <div class="round_corners">

         <p>  <?php the_content(); ?>  </p>
      </div>

    [Please post code or markup snippets between backticks or use the code button.]

    Then I edited the style.css, adding this code at the end:

    Code:

    div.round_corners {
   background-color: #4e4e4e;
   border-color: #595959;
   border-width: 1px;
   border-style: solid;
   border-radius: 10px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 11px;
   width: 940px;
   padding: 10px;
box-shadow: inset 2px 2px 10px #2a2a2a;
-moz-box-shadow: inset 2px 2px 10px #2a2a2a;}

    Since I also wanted the blog, and blogposts to appear with this “box”, I also added the first code (in the same way) to single.php, and page-blog.php

    I´m so happy right now!! =)))

    BUT I would love it if someone could tell me how to exclude this rule for just a couple of pages?

    Both page ID_7 and ID_14 are finished in their layout, and are not supposed to appear with my new “box” as a background.

    Can anyone tell me how to exclude something from my allready existing codes? =)

    esmi

    (@esmi)

    12 years, 1 month ago

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Need an background element with rounded corners on pages!’ is closed to new replies.