Mini Content Page

12 posts from 6 voices

• Started 11 months ago by didier2222
• Latest reply from Ismael
• This topic is resolved

Tags:

No tags yet.

1. 

   didier2222
   Member

   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

   Posted 11 months ago #
2. 

   Ismael
   Moderator

   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

   Posted 11 months ago #
3. 

   didier2222
   Member

   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

   Posted 11 months ago #
4. 

   didier2222
   Member

   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

   Posted 11 months ago #
5. 

   didier2222
   Member

   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

   Posted 11 months ago #
6. 

   Mya
   

   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

   Posted 11 months ago #
7. 

   pulpbyte
   Member

   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

   Posted 11 months ago #
8. 

   Ismael
   Moderator

   Hello,

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

   Drop the provided snippet there.

   Regards,
   Ismael

   Posted 11 months ago #
9. 

   pulpbyte
   Member

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

   Posted 11 months ago #
10. 

    Devin
    Moderator

    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

    Posted 11 months ago #
11. 

    Bryan
    Member

    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);

    Posted 11 months ago #
12. 

    Ismael
    Moderator

    Hi Didier,

    Just want to ask if this is resolved now?

    Regards,
    Ismael

    Posted 11 months ago #

RSS feed for this topic

Reply

You must log in to post.