We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

How do I customize the Box_cap image to change the color [Solved] | Forum

Topic location: Forum home » Support » General Questions
Wondell
Wondell May 25 '14

Greetings, I'm pulling my hair out over here trying to figure out how to change the header or box_cap image and color. I've been using firefox inspector and stylizer wysiwyg css editor to no avail. I can't seem to figure out how to change it. I'm a novice at css. I've gone so far as to change the box_cap.gif in a photo editing software and reuploaded the image but still no change. PLEASE teach me how to change this.

Thank you
The Forum post is edited by ross May 27 '14
bobbi
bobbi May 25 '14
i have a code that changes those it was given to me, it works in your profile pages once i get on my computer later i can give you the code you may have to tweak it a bit though

where did you get that screen shot from i recognise the members and content it is not your site
The Forum post is edited by bobbi May 25 '14
Wondell
Wondell May 25 '14
thanks so much for your reply. I got it from another guy who asked the same question a couple of years ago in the wall.fm forum. I just used his pic since he had the same concern instead of reinventing the wheel. http://support.wall.fm/forum/topic/2240 thats the actual post. you might even know the guy. He was given an answer but since he was asking about a wall.fm site from a couple years back I wasn't sure if the resolution would work on oxwall
The Forum post is edited by Wondell May 25 '14
John
John May 25 '14
You should be able to do this via admin/appearance/edit theme/theme customization. Most of the items that can be changed easily are there and that heading block may be one of them.

- Alternatively, make sure you have firebug running.
- Open Oxwall, Right click on box and "Inspect Element with Firebug". Make sure you right click on the box, not the text.

- Firebug's screen should be split. On one side it will show the code as read and on the other, the CSS file the code is being read from.

In my case the code is <div class="ow_box_cap_body">

On the other side or window will be the actual CSS. look for
"ow_box_cap_body". It should be at the top.

Look for background or some word that sounds like the background. it may be an image.

Hover the mouse in front of it and a red Stop Sign should appear. Click it and go back to the Oxwall page. The background should have disappeared.

That's the line you need to change.

In the top menu of Firebug click CSS (it's the third item)

Immediately below that, look for Source Edit and it will tell you the file containing the CSS. In my case base.css which is in  ow_themes/my_theme/base.css

Hope that helps.
The Forum post is edited by John May 25 '14
ross Team
ross May 26 '14
John +1
bobbi
bobbi May 26 '14
why i asked wendal the shot is from the website i now own although it has undergone many changes and a fresh new install since that pic was taken
Wondell
Wondell May 26 '14
Thanks for the help guys, however my issue continues. I only have the 4 default themes that come with Oxwall - Origin, Crayon, Showcase, and Darklet. Neither come with theme editing options to change the box_cap. the only theme I've seen that gives you the option to change the Box_cap is OWD Gwin.
I've been playing with firebug and firefox inspector for days now and here is what I see:

Firebug:


Firefox Inspector:

I looked at the CSS file base a few days ago and saw that there is actually a box_cap image in the theme's image folder. In fact there is a box_cap, box_cap rt and left images. It appears the box_cap image is repeated throughout the length of the header area and there is a right and left image to give it those rounded edges on either end. I've downloaded that file and changed the color, uploaded it using the same image name hoping for the site to recognize it and there was no change.
When I right click on the element on the screen within the browser and inspect it I see the elements controlling it however when I altered the background attribute it change the background of the entire site. I'm so surprised there is not more information anywhere to be found about it. I would assume EVERYONE would want to change the color of those header bars


ross Team
ross May 27 '14
Wondell I'm sorry beforehand if I understood you wrong. 


I added these styles in the theme customizer of the Darklets theme: 


.ow_box_cap_body{background-color: red;border-radius: 5px 5px 0 0 ;}


and I have this result: 


then I change the icon for the newsfeed in the ow_themes/images/ic_clock.png enabled dev mode and refreshed the page and as you can see the icon is there, however it requires some size editing. 

Wondell
Wondell May 27 '14
Wow bro!!! that's awesome Ross! That's EXACTLY what I'm trying to do!!! I've been trying to do it in firebug/firefox inspector which is VERY confusing. I know about the feature to alter the CSS in the theme customization section where I'd just copy and paste the code but I didn't know what code line to alter to get the effect I wanted. This is a tremendous help thank you!!!
ross Team
ross May 27 '14
No problem, i'm going to mark this post as Solved