Options

Home page customization moving from legacy to new

Jacob FarlowJacob Farlow Registered Users Posts: 5 Beginner grinner
edited February 24, 2014 in SmugMug Customization
I'm in the process of moving my legacy site over to the new templates and I've found one I really enjoy. However, I'm having a tough time with my bio section looking good. Right now I'm using the Sierra template and theme with rotating photos for the home page background. The bio hovers over the background but there's no defining box surrounding it to give it some help with legibility.

Can anyone 1) help me get a box to surround the floating bio section on the home page, 2) help me adjust the color of both the box and its text, and 3) help me fiddle with its opacity to allow some transparency through to the background? I want to get this part looking fantastic before I unveil my new site. Here is a screen shot illustrating my difficulty: http://imgur.com/iJLOq6U

Thanks!
- Jacob

Comments

  • Options
    AllenAllen Registered Users Posts: 10,012 Major grins
    edited February 23, 2014
    If you open in the latest Firefox right click on text and pick "Inspect Element" and see if you can find the class name of the box.
    Look up a few lines for it for something like this. This is my home page box.

    <div id="sm-page-widget-NbWrFtFh" class="sm-page-widget sm-page-widget-text sm-page-widget-759791" data-typeid="759791">

    With that we can help getting a border an background on the box.


    .sm-page-widget-747941 {
    border:6px double #222;
    background:rgba(22,22,22,.30)
    }

    or also found this (both these in homepage CSS)

    .sm-page-widget-text{
    border:6px double #222;
    border-width:6px 0 6px 6px;
    background:rgba(22,22,22,.30);
    padding-bottom:30px;
    padding-top:20px;
    height:324px
    }

    Think I only need the bottom one, looks like dups.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    Jacob FarlowJacob Farlow Registered Users Posts: 5 Beginner grinner
    edited February 24, 2014
    This is what I found for my home page:

    <div id="sm-page-widget-6kfms5BF" class="sm-page-widget sm-page-widget-profile sm-page-widget-5139745" data-typeid="5139745">

    So I assume the code I add should reflect yours, but with my widget number and look like this:

    .sm-page-widget-5139745 {
    border:6px double #222;
    background:rgba(22,22,22,.53)
    }

    I've added a CSS section and put in the information and it does look a lot better, though now my page name ends outside the box. A couple follow up questions:
    1) How do I adjust font color?
    2) How do I fit my site name inside the text box?

    Here's another screen shot to reflect the changes. The border looks amazing and I adjusted the opacity percentage. http://imgur.com/7TgNQLD


    Thanks so much!

    - Jacob
  • Options
    AllenAllen Registered Users Posts: 10,012 Major grins
    edited February 24, 2014
    Jacob Farlow wrote: »
    This is what I found for my home page:

    <div id="sm-page-widget-6kfms5BF" class="sm-page-widget sm-page-widget-profile sm-page-widget-5139745" data-typeid="5139745">

    So I assume the code I add should reflect yours, but with my widget number and look like this:

    .sm-page-widget-5139745 {
    border:6px double #222;
    background:rgba(22,22,22,.53)
    }

    I've added a CSS section and put in the information and it does look a lot better, though now my page name ends outside the box. A couple follow up questions:
    1) How do I adjust font color?
    2) How do I fit my site name inside the text box?

    Here's another screen shot to reflect the changes. The border looks amazing and I adjusted the opacity percentage. http://imgur.com/7TgNQLD


    Thanks so much!

    - Jacob
    Have you tried to set a width in the CSS?
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    Jacob FarlowJacob Farlow Registered Users Posts: 5 Beginner grinner
    edited February 24, 2014
    I've been playing around with things now, and this is what it looks like: http://imgur.com/ICgzghU

    The bio section is just how I want it, thanks to your help. Now I'm looking at making the top navigation more visible against lighter backgrounds. I've basically copied the CSS code from the bio section and tweaked it some, but I find I still need some help.

    This is my bio section:
    .sm-page-widget-5139745 {
    border:6px double #222;
    width:750px;
    background:rgba(22,22,22,.53)
    }
    body {color:white} This part changed the text color

    I've tried to copy some elements into the navigation bar, but it just doesn't seem to work quite the same way. For example, "body {color:white]" doesn't change the navigation links' color.

    Here is what I have for the nav. bar:
    .sm-page-widget-5139100 {
    border:1px double #222;
    background:rgba(22,22,22,.10);
    height:65px;
    }
    body {color:white} This one and the code immediately below were unsuccessful attempts to change the navigation links color
    content {color:white}
    div
    {
    color:white This one helps text visibility on the edit page
    }


    So basically what I would like to do is make the navigation links white against that background. And if possible, make them look like individual buttons with their own rounded borders rather than having that gray bar span the width of the screen.

    Thanks again!
    - Jacob
Sign In or Register to comment.