Background, fixed menu, "sponsor area"

  • Unknown's avatar
    maffswe · Member ·

    Hi!
    Im using the massive press theme and could really use some help in figuring out any solutions.

    1. I cant add a background image no matter the settings. Ive tried clearing the custom css fields, messing around with fixed and positionings but without any results. The background color always seems to overwrite the image. It only flashes when loading a page or a very small part is visible ex. at footer.

    2. I would like to have a box with clickable links to sponsors/people i work with and their logos at the footer. Since the theme has no footer area for widgets how could i approach this?

    3. My last question is regarding a fixed menu that follows when you scroll. I have been able to figure out how to move the text of the top menu with position: fixed; but the background area doesnt follow. Any attempts to fix the top.nav or header area results in the background and text merging together in a small rectangle.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    1. I cant add a background image no matter the settings. Ive tried clearing the custom css fields, messing around with fixed and positionings but without any results. The background color always seems to overwrite the image. It only flashes when loading a page or a very small part is visible ex. at footer.

    What is interfering with your chosen background is a background color set for #page. Add the following to remove that. 

    #page {
    background-color: transparent;
}

    What I might suggest though, considering the busyness of your chosen background, would be to perhaps mute it a little by setting the background color to a transparent black (or white). 

    #page {
    background-color: rgba(0, 0, 0, 0.4);
}

    In the above, the first three numbers represent black in RGB and the 4th number is the opacity (closer to 0, the more transparent). If you wish to try white, change all three of the first numbers to 255.

    2. I would like to have a box with clickable links to sponsors/people i work with and their logos at the footer. Since the theme has no footer area for widgets how could i approach this?

    Unfortunately, the way you have done it is about the only way to accomplish this. CSS is a styling document used by the browsers to position and style the elements of a web page, and cannot be used to add linked images.

    Given the number of images you wish to put into these two lower areas, getting them to align nicely and look good is going to be a big challenge.

    3. My last question is regarding a fixed menu that follows when you scroll. I have been able to figure out how to move the text of the top menu with position: fixed; but the background area doesnt follow. Any attempts to fix the top.nav or header area results in the background and text merging together in a small rectangle.

    Give the following a try and see what you think. It fixes the entire header area. 

    .bottom.row {
    background: none repeat scroll 0 0 #000;
    position: fixed;
    top: 186px;
    z-index: 10;
}
.site-main {
    padding-top: 280px;
}
.top.row {
    position: fixed;
    z-index: 11;
}
.site-header .middle {
    background: none repeat scroll 0 0 #000;
    height: 200px;
    position: fixed;
    top: 0;
    z-index: 10;
}
  • Unknown's avatar
    maffswe · Member ·

    Appreciate the help sacred!

    1. The background command worked just fine! Im curious though if (Im sure there is a term for this) content filled space of the webpage could have a colored background and leave sides to whatever background image ive chosen.

    2. I see, ill just keep experimenting with the current solution.

    3. The customiser refuses to save anything. Could be my work computer though, so ill have to try this code later.

    I have one last question for you sacred:
    I have managed to change the position of the widget thumbnail titles (Speaking Flowerinian) on the home page. Would creating some form of padding around the text aswell as coloring options be possible?
    = Change position of thumbnail text and creating ex. a red rectangle around it.

  • Unknown's avatar
    thesacredpath · Member ·

    1. The background command worked just fine! Im curious though if (Im sure there is a term for this) content filled space of the webpage could have a colored background and leave sides to whatever background image ive chosen.

    Give this a try and see what you think. You can of course edit the color. 

    #main .container {
    background: #777;
    padding-top: 20px;
}

    3. The customiser refuses to save anything. Could be my work computer though, so ill have to try this code later.

    There was a problem earlier, but it has now been fixed. Give it another try and then let us know if you have any problems.

    I have managed to change the position of the widget thumbnail titles (Speaking Flowerinian) on the home page. Would creating some form of padding around the text aswell as coloring options be possible?

    This solution puts a red 3px border around the text itself. 

    .widget_featured_posts h4 a {
    border: 3px solid #cc0000;
    padding: 5px;
}

    This solution puts a red 3px border around the entire h4 element, which is full-width of the image. 

    .widget_featured_posts h4 {
    border: 3px solid #cc0000;
    padding: 5px;
}

    This solution uses the above, but puts the border on the left, right and bottom and uses position: relative to move the title up to meet with the bottom of the thumbnail border and adds a background color. 

    .widget_featured_posts h4 {
    border-bottom: 3px solid #cc0000;
    padding: 5px;
    position: relative;
    top: -10px;
    border-left: 3px solid #cc0000;
    border-right: 3px solid #cc0000;
    background: #7db4b5;
}
  • Unknown's avatar
    maffswe · Member ·

    Everything spot on sacred, cheers! That last piece of code was everything i needed.
    Everything should be setup soon.
    Only thing ive been curious about is wether or not you can scale gallery photos so that the thumbnail shows the same size even though differences in dimensions.

  • Unknown's avatar
    thesacredpath · Member ·

    Take a look at the Gallery support page. There are a number of Gallery Styles you can choose from, and one of those is square, where the height and width dimensions will be the same in the gallery (there is a center-weighted cropping that takes place). You might play with the square style and see if that would work for you.

    Straight CSS solutions are a little lacking, but if the above doesn’t work for you, let me know and we can take a look at things and see if we can get you where you want to be.

  • The topic ‘Background, fixed menu, "sponsor area"’ is closed to new replies.