Transparency

10 posts from 4 voices

• Started 6 months ago by revdrdavidreid
• Latest reply from Ismael
• This topic is not a support question

Tags:

No tags yet.

1. 

   revdrdavidreid
   Member

   I have purchased Choices, Coherence and Incarnation themes and would like to purchase your wp-backgounds ii plugin if I can make my pages in these themes partly transparent like you did in you wp-backgrounds ii demo. (i.e. the background picture to show through the page a bit.)

   Is that possible?

   David

   Posted 6 months ago #
2. 

   Dude
   Dude

   Yes, it's possible to convert these themes into "semi-transparent" themes but it would require some work (probably 2-3 hours). Especially some shortcodes, icons and shadow images are tricky to convert. You can start with following css code:

   .header_color,.header_color .site-background,.header_color .first-quote,.header_color .related_image_wrap,.header_color .gravatar img,.header_color .comment-reply-link,.header_color .inner_slide .numeric_controls a,.header_color .hr_content,.header_color .news-thumb,.header_color .post-format-icon,.header_color .ajax_controlls a
   {
     background-color:transparent;
   }
   
   .socket_color div .avia_table tr.description_row td,.socket_color div .avia_table tr.pricing-row td,.socket_color tr.pricing-row .avia-table-icon,.socket_color tr.description_row .avia-table-icon,.socket_color .css_3_hover
   {
     background:tranparent;
   }
   
   #wrap_all{
   background: rgba(0,0,0,0.6);
   }

   - it will remove the bg color from most "content" elements and add a semi transparent (black) background to the surrounding container.

   Posted 6 months ago #
3. 

   revdrdavidreid
   Member

   I added this to the custom css file but it didn't make any difference.

   Posted 6 months ago #
4. 

   Dude
   Dude

   Hi!

   Can you post a link to your website please and add the code I posted above to css/custom.css. I need to investigate the source code.

   Regards,
   Peter

   Posted 6 months ago #
5. 

   revdrdavidreid
   Member

   I'm working on this locally

   Posted 6 months ago #
6. 

   revdrdavidreid
   Member

   I put it online just now...
   http://www.webdynamix.info/arkdev/

   David

   Posted 6 months ago #
7. 

   Devin
   Moderator

   Hey David,

   I see the changes in effect. If you want to remove the semi transparent black so its completely transparent just change the wrap all to:
   

   #wrap_all {
   background: rgba(0,0,0,0);
   }

   I'll tag this for Peter as well.

   Regards,

   Devin

   Posted 6 months ago #
8. 

   Dude
   Dude

   You can apply the semi background color to the content container with following css code (add it to css/custom.css):

   #top .site-background, .container, #top .main_menu .menu ul li a, .first-quote, .slideshow_container, .pointer_arrow_wrap .pointer_arrow, .related_image_wrap, .gravatar img, .comment-reply-link, #top .inner_slide .numeric_controls a, .hr_content, .news-thumb {
   background-color: rgba(0, 0, 0, 0.6);
   }

   Posted 6 months ago #
9. 

   revdrdavidreid
   Member

   Thanks, worked great.

   Posted 6 months ago #
10. 

    Ismael
    Moderator

    Hi revdrdavidreid,

    Glad that Peter helped you. :)

    Cheers,
    Ismael

    Posted 6 months ago #

RSS feed for this topic

Reply

You must log in to post.