image instead of white inside the border?

Home Forums Automattic Funki image instead of white inside the border?

Viewing 20 posts - 1 through 20 (of 42 total)
  • Author
    Posts
  • #101829 Resolve

    Diane Luna
    Member

    Is it possible to use an image inside the of black border instead of solid white? Would the text and widgets have transparent backgrounds then?

    I’d love to have a stationary image behind the whole thing, inside the black border, different than the overall background that is behind everything. I’d love to have the text and widgets be transparent and scroll over the image.

    Is this possible? Thanks :)

    Diane

    The blog I need help with is dianelunamusic.wordpress.com
    #116793

    Michael Fields
    Member

    Hi Diane!

    Is it possible to use an image inside the of black border instead of solid white?

    Yes, you can add the following styles via Custom CSS upgrade. You will need to replace the url with a url to the image that you would like displayed:

    #page {
    background-image: url( "http://example.com/image.jpg" );
    background-repeat: no-repeat;
    background-attachment: fixed;
    }

    <blockoquote>Would the text and widgets have transparent backgrounds then?

    Not on their own. More custom css will need to be added to allow for this. Please try something like this:

    #secondary .widget:first-child {
    margin-top: 0;
    }

    .hentry,
    .widget {
    background : rgba( 255, 255, 255, .75 );
    padding: 1em
    }

    #116810

    Diane Luna
    Member

    Thank you – will try this today and post how it goes.

    #116832

    Diane Luna
    Member

    That actually didnt work – the image was too far to the left, and the black border shrunk to fit the image…

    I tried this code that works though:

    .site {

    background:url(‘http://my wordpress image’s url’)no-repeat;

    }

    Except that below the image it is transparent. Is it possible to put a background color behind the image? So that when it scrolls down it goes to color not to transparent?

    Thanks!!!!!

    #116861

    Michelle

    hi dianeluna,

    I’m glad you were able to get the background image working. However, I’m not quite sure what the transparent area is that you are referring to. Could you provide me with a screenshot showing the transparent area so that I can take a look?

    Thanks!

    #116895

    Diane Luna
    Member

    Here is a screen shot of one of the images I tried.

    The image used isn’t quite wide enough, but it was a good example to show that it is transparent at the side of the image and below it. My hoped result was to be able to have a color instead of the transparency.

    Let me know! Thanks.

    #116938

    Michelle

    Thanks for the screenshot. Just to confirm (I want to be sure I understand what you are asking), are you referring to the custom header image and the areas to the right and bottom of it? See the marked areas in this screenshot.

    #116948

    Diane Luna
    Member

    You are correct! Thanks :)

    #117005

    Michelle

    To remove the extra space to the right of the image, make sure the custom header image is at least 990px.

    You can place a color behind the header image with something like this:

    .site-header hgroup {

    background: #ccc;

    padding-bottom: 10px;

    }

    Replace #ccc with the color of your choice. You can also adjust the amount of at the bottom of the image by changing the “10px” bottom padding.

    Let me know how this works!

    #117051

    Diane Luna
    Member

    I couldn’t get that to work.

    For now I’m just using a logo at the top and focusing on the slider for photos. It looks great actually so I may just leave it that way.

    I had a couple other questions, let me know if I should make a new post since they are a new subject, or ask them here. The couple things I’ve been stuck on:

    1. how do I change the body text color, and the widgets color? I’d like to make it a little bit darker than the default.

    2. is there a way to make the slider auto-rotate, like a slideshow?

    Really appreciate the help!

    #117052

    Diane Luna
    Member

    To clarify the above #1 question – widgets TEXT color

    #117087

    Michelle

    To change the body text color, you’d use the following CSS:

    body {

    color: #000000;

    }

    This changes the text to black.

    The widget text color can be changed with this CSS:

    .widget {

    color: #666666;

    }

    It is not possible at this time to make the slider auto-rotate, although that is a feature we may consider as a future enhancement.

    #117101

    Diane Luna
    Member

    The body text changed and looks great. Thank you!

    The widget text did not change. Is there another code for that?

    Bummed about the slider – I must have missed that it doesn’t rotate with this theme. Since I did purchase the theme, and still LOVE it… is there another way I could make it rotate?

    Like… could I turn it into just a photo slideshow, and link each photo to their respective blogs, instead of using the “featured photo” in each blog that is set up with the theme?

    I hope you do consider adding the rotating feature, it would sure be a great enhancement :)

    #117186

    Diane Luna
    Member

    Site is live now:

    http://www.dianeluna.com

    I can make it work without the rotating slider.

    If possible – would still love to find out how to change the widget text color.

    Appreciate all the help :)

    #117223

    Michelle

    Hi, I apologize for giving you incorrect code for changing the widget text color. Can you try this?

    .widget {

    color: #000;

    }

    This will turn it black. Is that the color you wanted it to be?

    Your site looks great! Do you mind if we add it to our “Who’s using this theme” gallery for Funki? See this page, near the bottom of the right column: http://theme.wordpress.com/themes/funki/

    I understand about the slider. We will definitely consider it for a future update and will let you know if we add it!

    #117230

    Diane Luna
    Member

    That worked for the widgets. Thanks :)

    Yes feel free to add it to the gallery – thanks thats awesome!

    I peeked at the one you have featured presently called “in Harsh Light” – how did they add the little Facebook, Twitter and Google icons up at the top right next to the search box? I actually had that on my list to look into just hadn’t gotten to it yet.

    Is this too many questions for one forum post? If so I apologize…

    #117336

    Michelle

    It looks like the social icons were achieved with the following steps:

    1. For each social link you want to add, you will need an image. It’s best if the images are all the same size, for a consistent look. You can upload these images directly to your media library under Dashboard > Media > Add New
    2. Add each social link to the main menu (a “Custom Link”). For example, to add a Facebook link you’d enter “Facebook” as the menu label and your Facebook URL as the URL.
    3. For each social link menu item (still on the menu administration screen) click the little down arrow on the right to expand it for editing. Once you’ve done that, find the box labeled “CSS Classes”. This will be the name of the CSS class you’ll use to refer to this particular menu item in your Custom CSS. You can type anything here, such as “facebook”, “twitter”, etc.

      Note: If you don’t see the “CSS Classes” box, look to the very top of the screen for a little box called “Screen Options”. Click on it to expand it, and then make sure “CSS Classes” is checked under “Advanced CSS Properties”.

    4. Next, you’ll need to enter the following CSS in your Editor (your class names may be different, they need to match with the class names you gave your menu items in he previous step):
      .site-nav li.facebook,
      .site-nav li.twitter {
      float: right;
      width: WIDTH_OF_YOUR_UPLOADED_ICON_IMAGES;
      }
      .site-nav li.facebook a {
      background: url('http://URL_OF_YOUR_UPLOADED_FACEBOOK_IMAGE') no-repeat left center;
      display: block;
      height: HEIGHT_OF_YOUR_UPLOADED_ICON_IMAGES;
      overflow: hidden;
      text-indent: -9999px;
      }

      Repeat the second block of CSS code for each social icon you’d like to include. For example, you might have: .site-nav li.twitter a which would correspond with the Twitter menu link, and so on.

    I hope this helps! If you run into any issues with implementing it, please let me know.

    #117505

    Diane Luna
    Member

    OK so I found the “MENUS” option under “APPEARANCE” in my dashboard column on the left.

    But – when I click on menus and get the admin screen, I can’t see where to add to the existing main menu. I can only see where to create a new menu. Am I just not seeing it? Or is there another place or way to access the main menu?

    I tried your steps and managed to accidentally replace my main menu items with Facebook/twitter etc – by creating a new menu which I discovered is NOT what I want to do – so I’m close, but not quite there :)

    #117515

    Diane Luna
    Member

    Hi. I went ahead and created a custom menu and did your instructions above, and typed in the below css. (copied & pasted so you can see if I mis-typed something)

    .site-nav li.facebook,

    .site-nav li.twitter {

    float: right;

    width: 80px;

    }

    .site-nav li.facebook {

    background: url(‘http://dianelunamusic.files.wordpress.com/2012/05/facebook-ping.png&#8217;) no-repeat left center;

    display: block;

    height: 80px;

    overflow: hidden;

    text-indent: -9999px;

    }

    Here is screen shot of what I ended up with:

    http://dianelunamusic.files.wordpress.com/2012/05/screen-shot-2012-05-08-at-10-08-13-pm.png

    #117644

    philiparthurmoore
    Member

    Hi Diane. In the code you’ve posted above I see ‘.site-nav li.facebook’. You’re missing an ‘a’. So try ‘.site-nav li.facebook a’ and let me know how it goes. Awesome looking site. Cheers.

Viewing 20 posts - 1 through 20 (of 42 total)

The topic ‘image instead of white inside the border?’ is closed to new replies.