Jump to content


Photo
* * * * * 1 votes

Background of body seems to be transparent

background

  • Please log in to reply
9 replies to this topic

#1 GoddessLynne

GoddessLynne

    Newbie

  • Members
  • Pip
  • 6 posts
  • Framework Version:Lite
  • Country: Country Flag

Posted 25 August 2014 - 11:20 AM

Hello everyone :)

I am trying to make it so the body of my site is one color and the background is an image. 

As of right now, the body color seems to be transparent and the background image is the entire page.

http://goddesslynne.com/contact-me/

 

I am trying to make it similar to this: http://missjezebel.com/

The background of that site is the fabric type pattern and the body color is white.

 

I would also like to make it so the boxes have a color and are not transparent.

 

Any help would be greatly appreciated :)



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 August 2014 - 11:25 AM

Hi,

 

Can you provide screenshots of your layout settings, color settings and the settings to where you have added your background image please.

 

Also, please be aware that you're using an out of date version of Platfom and is also a legacy theme, which has been for over two years. I recommend you perform a backup and update to the latest version, you can download it from here - 

 

https://github.com/p...nes/platformpro



#3 GoddessLynne

GoddessLynne

    Newbie

  • Members
  • Pip
  • 6 posts
  • Framework Version:Lite
  • Country: Country Flag

Posted 25 August 2014 - 11:31 AM

Here you go, hope this is what you needed. :)

 

layout-settings.pngbackground-settings.png



#4 GoddessLynne

GoddessLynne

    Newbie

  • Members
  • Pip
  • 6 posts
  • Framework Version:Lite
  • Country: Country Flag

Posted 25 August 2014 - 11:43 AM

Just updated to Platform Pro, thank you for the link. :)

Looks like the upgraded version has the solution to my problem! Awesome!

I guess the only thing I have an issue with now is wondering if there is any way to make the widget boxes different colors?



#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 August 2014 - 12:12 PM

When you say Widget boxes, can you show me a screen shot of what you're referring to please, as it is likely you will need custom CSS.



#6 GoddessLynne

GoddessLynne

    Newbie

  • Members
  • Pip
  • 6 posts
  • Framework Version:Lite
  • Country: Country Flag

Posted 25 August 2014 - 12:51 PM

Highlighted with red :)

 

widgets.png


Edited by GoddessLynne, 25 August 2014 - 12:51 PM.


#7 GoddessLynne

GoddessLynne

    Newbie

  • Members
  • Pip
  • 6 posts
  • Framework Version:Lite
  • Country: Country Flag

Posted 25 August 2014 - 01:03 PM

I would like for them to look like these:

widgets3.png



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 August 2014 - 01:07 PM

If you inspect the widgets you see that each of them are given a class and a ID, you can use these to styling them how you like.

For example:

 

.widget_categories {
background-color: lightpink;
}
 
You can also prefix your CSS to target specific elements such as that widgets title.
 
.widget_categories .widget-title {
color: #FFF;
font-size: 18px;
text-align: center;
background: #C23BA7;
}

 

And so on. So the best thing to do is inspect them using Google Chromes dev tools and then have a play using different styles.



#9 GoddessLynne

GoddessLynne

    Newbie

  • Members
  • Pip
  • 6 posts
  • Framework Version:Lite
  • Country: Country Flag

Posted 25 August 2014 - 01:27 PM

Is this what I would be changing?

widgets4.png



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 August 2014 - 09:31 AM

You can edit the core files. However, this is something we do not recommend nor support. If you want to override the default styling of Platform Pro, then you will want to add your custom CSS to the Custom Code options panel in the Platform Pro settings.

 

https://cloudup.com/cUv3oKJSDML

 

What you will need to do is inspect your widgets using Google Chrome dev tools and locate the correct classes, then override them using custom CSS. Once you have the correct CSS and it is to your liking, then you add that code to the Custom CSS panel which I show in the image above.







Also tagged with one or more of these keywords: background