Jump to content

Background to Transparent

Featured Replies

Posted

Hello, 

 

The design I am going forhttps://www.dojrp.com/communications/

 

I was wondering how they got the text boxes transparent as I am trying to do this on my forums. I have been looking and can not figure out the exact way to do so any help would be helpful.

  • Author

Joy Rex, 

Thank you for the help, I have coded that now how would I upload that to all the pages on my website?

 

Thankyou again.

6 hours ago, Noah F said:

Joy Rex, 

Thank you for the help, I have coded that now how would I upload that to all the pages on my website?

 

Thankyou again.

You would put any custom CSS in when you are editing your theme using Easy Mode:

image.png.c74b9d1795b7d51be80d2c0c80a9f621.png

From there, you would add your custom CSS to the Custom CSS area:

image.png.40e61ff1bc00c873754eb00c6bcc52fb.png

I find using your browser's built-in developer tools (like in Google Chrome, you can right-click and choose "Inspect Element" and a panel will appear that will highlight the code and you can then see the IDs and classes used to style the element) to find the element you want to customize  - for example, if you wanted to make the main content wrapper for the board transparent and set it to a dark gray with 50% transparency:

#ipsLayout_contentWrapper {
   background: rgba(125,125,125,.5);
}

I would recommend reading up on how to use Chrome's Developer Tools, and use it on other websites to learn how they achieved certain techniques and looks you might want to use on your own site.

 

Good luck!

Edited by Joy Rex

  • Author

Hey Joy, 

It doesn't show that for me. 

 

1719550615_Screenshot(120).thumb.png.4e06c99bba11a96506ff5139de6d393f.pngSo when I press new it automatically crashes and say invalided IP.

5 minutes ago, Noah F said:

Hey Joy, 

It doesn't show that for me. 

 

1719550615_Screenshot(120).thumb.png.4e06c99bba11a96506ff5139de6d393f.pngSo when I press new it automatically crashes and say invalided IP.

Reason not showing is because Noah was showing the 'Easy' option when creating a new skin (you get option of Easy or Manual and looks like you chose Manual

you need to add to the custom.css that is showing in your screenshot

  • Author

Alright this is what it shows once I do 

"New" on the right hand side.

 

1290443046_Screenshot(121).thumb.png.adfacf7c4626cc38b0d17013b90d188f.png

8 minutes ago, Noah F said:

Alright this is what it shows once I do 

"New" on the right hand side.

 

1290443046_Screenshot(121).thumb.png.adfacf7c4626cc38b0d17013b90d188f.png

Why are you adding a new css file ... look for the custom.css in the last screenshot you gave

  • Author

Alright so I've fixed it now. 

 

But how would I go about adding an additional slots to it?

Edited by Noah F
ey 4hsrthrshrghrh

1 hour ago, Noah F said:

Alright so I've fixed it now. 

 

But how would I go about adding an additional slots to it?

Sorry what do you mean by additional slots

  • Author

Hey Steve, 

 

I was thinking about my footer, header and the search link I just can not figure it out..

Do you have any ideas to add onto the current custom css?

 

need more info as no idea what you are wanting to do

Archived

This topic is now archived and is closed to further replies.

Recently Browsing 0

  • No registered users viewing this page.