Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #12733

    Hi Guys

    I only use the mini content page once on my home page – http://www.ciambra.com

    I want to make it slightly smaller and transparent like the same effect as that space between the copyright info & the hide sidebar & content tab on the homepage. I think that it would really make my logo and marketing tag pop while not affecting the integrity of the background slideshow.

    Is this possible and if so can you advise me how to do it?

    Thanks

    Didier

    #76531

    Hello,

    Please drop this on your custom.css. You might want to play around with it to get what you want.

    .entry-mini {
    width: 300px;
    }

    You may also have to upload a .png image with transparent background in order to achieve the transparent effect. :)

    Regards,

    Ismael

    #76532

    Thank you for the quick response. Silly question but I am new to WP – where, what folder do I upload the .PNG image with transparent background? What is the name of the image I need to replace?

    Thanks

    Didier

    #76533

    Another silly question Ismael – is the custom .css is where the Quick CSS box is in the Flashlight Theme Options? Is that where I do my playing around to find the right size for the mini content area?

    Thanks

    Didier

    #76534

    Also – based on the code you gave me – I see that I can change the width but can I also change the height of the box or is that set at a default size?

    Didier

    #76535

    Hi Didier,

    I’m going to respond to your questions in order of your posts.

    1) There’s actually two ways you can upload the image. You can upload the .PNG to /wp-content/themes/flashlight/images/ using FTP or you can upload the .PNG using Media > Add New. Whichever way you choose you would note the image path and change your CSS accordingly. For example, if you uploaded the image via FTP you would add this to your custom.css or Quick CSS.

    .entry-mini {
    background:transparent url(/wp-content/themes/flashlight/images/background-transparent.png) repeat top left;
    }

    As far as the name of the image you need to replace, there is no image you need to replace.

    2) You have two options for storing customizations. The first is adding your customizations in custom.css located in your /wp-content/themes/flashlight/css/ folder. The second is the Quick CSS box under Flashlight > Theme Options > Styling. Really the choice is yours as far as which to use. I would suggest though that if you’re playing around use the Quick CSS then once your customizations are the way you want them copy everything in that box into the custom.css just so you’ll have a record.

    3) The box will automatically resize according to your text. If however you find you want more space around the edges I suggest adjusting the padding since defining a specific height may present some positioning issues.

    .entry-mini .box { padding: 30px 30px 30px 30px; }

    The four 30px represent in order – top spacing, right spacing, bottom spacing and left spacing. So you actually do something like 60px 30px 60px 30px which would give the box 60px of space on top and bottom, 30px of space on right and left.

    Hope this helps!

    Regards,

    Mya

    #76536

    Hi there,

    After reading this post, I’ve managed to change the size in the Quick CSS but not the opacity and colours.

    This is what i have put in:

    .entry-mini {

    width: 400px; background-color: rgb(114,131,141); opacity: 0.5;

    }

    But the colour didn’t change and the opacity reduced including the text.

    How do I change them without affecting the text and images?

    Where is the custom CSS folder? In the ftp or my dashboard?

    pulpbyte

    #76537

    Hello,

    The custom.css can be found via ftp on wp-content > themes > flashlight > css folder. :)

    Drop the provided snippet there.

    Regards,

    Ismael

    #76538

    Thanks. But anyway to control the opacity of the mini content box?

    #76539

    Hi pulpbyte,

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    .entry-mini .box {
    opacity: 0.7;
    }

    Regards,

    Devin

    #76540

    If you want to support that transparency in IE8 (and all previous versions), you should also probably add a filter code under there. something like:

    filter:alpha(opacity=70);

    #76541

    Hi Didier,

    Just want to ask if this is resolved now?

    Regards,

    Ismael

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Mini Content Page’ is closed to new replies.