Need Help with CSS Customization of Profiles in RC2 Curve.

Started by LC, December 11, 2009, 08:00:23 PM

Previous topic - Next topic

LC

So I am using the Ultimate Profile Mod and the RC2 Curve theme. 

I have issues customizing the profiles with CSS, as the frames and colors for Curve seems to be overriding it.

Here is the default CSS code I've been using.
<style type="text/css">

/* =================== */
/* The Main Controls */
/* =================== */

/* Below is the Main Background IMG */
/* Place your image URL in the ( )   */
/* or if you want a solid color, add it's */
/* hexadecimal code just after the ( )  */
/* example; background: url( ) #ff0000; */

body
{
background: url() #000000;
}

/* Color control for top of page*/
/* set as transparent to see background image */
/* or if you want a solid color, */
/* add it's hexadecimal code */
#topframe
{
background: url() transparent;
}

/* This controls the area just below the NAV Buttons */
/* make transparent to see Background Image*/
#linktree
{
background: transparent;
}

/* Color control for middle of page*/
/* set as transparent to see background image */
/* or if you want a solid color, */
/* add it's hexadecimal code */
#bodyarea2
{
background: transparent;
}

/* Color control for bottom of page*/
/* set as transparent to see background image */
/* or if you want a solid color, */
/* add it's hexadecimal code */
#footer
{
padding-bottom: 50px;
background: transparent;
}

/* Background Line Image for the left and right */
/* side of the page. If you'd like to use your own */
/* place your Line's image URL in the ( ) or */
/* you could just leave it blank */

#leftframe
{
background: url() repeat-y;
height: inherit;
padding-left: 18px;
}

#rightframe
{
background: url() top right repeat-y;
padding-right: 18px;
height: inherit;
}

/* ================== */
/* Section Box Controls */
/* ================== */

/* Color controls for the bar accross the top of */
/* the Main Section Boxes */
/* if you have your own bars you'd like to use, type */
/* it's URL in the ( ) or if you want */
/* a solid color, add it's hexadecimal code just */
/* after the ( ) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
background: url() repeat-x bottom left #2E89FE;
}

/* Color control for Main Section Boxes */
.windowbg
{
background: url() #B2F5FF;
border: solid 0px #ff0000;
}

/* Controls various tables in your profile */
/* to see which ones raise the  */
/* border to 3px */
.bordercolor
{
background: url() transparent;
border: solid 0px #ff0000;
}

/* Controls various inner tables in your profile */
/* to see which ones raise the  */
/* border to 3px */
.hrcolor
{
background: url() transparent;
border: solid 0px #ff0000;
}

/* Your Signature Field */
.signature
{
  color: #ff0000;
}


/* Background color control for the right side */
/* of the Comments box */
.windowbg2
{
background: url() #D3F8FD;
border: solid 0px #ff0000;
}

/* ======================== */
/* "Add a Comment" Box Controls */
/* ======================== */

/* Color control for the text field that comes up */
/* when a user clicks Add a Comment */
/* background controls the text box */
/* "color" controls the font color */
textarea
{
background: #ffffff;
color: red;
border: solid 1px #777000;
font-size: 100%;
}

/* Color control for the SEND button */
/* on the Add a Comment form */
/* background controls the button color */
/* "color" controls the font color */
input, button
{
background: #ff0000;
color: #000000;
padding: 1px;
font-size: 90%;
}

/* ==================== */
/* Font and Link Controls */
/* ==================== */

/* Color, Size, and Font style control for most text */
body, td, th , tr
{
color: #4BFD50;
font-size: 100.01%;
font-family: tahoma, sans-serif;
}

/* Color control for standard URL links. */
a
{
color: #1FD924;
text-decoration: none;
}
a:hover
{
color: #44ED48;
text-decoration: underline;
}

/* ========================= */
/* Extra Controls (optional) */
/*   add your own code below */
/* ========================= */

/* This is a font size and color control */
/* you can add to your text */
/* Anything below this line is not connected */
/*   to the default profile */
.big {
  font-size: 20px;
  color: #0000ff;
}

</style>


Can anyone show me or explain to me how I can make the Curve theme sit behind or be invisible in the profile area so people can add their own backgrounds?

Alex Stanford

Why not just allow the users to override the existing background declarations for the theme?  This would allow for the default to remain until the user defines something else, too.

LC

Quote from: Alex Stanford on December 12, 2009, 11:20:38 PM
Why not just allow the users to override the existing background declarations for the theme?  This would allow for the default to remain until the user defines something else, too.
That's what I am looking to do (anything to fix this really). But I have the slightest clue how. Still learning PHP and CSS.

LC

Anyone who made the curve theme or someone with the answer I would be eternally grateful.

I'd hate to get rid of the mod just because no one can edit their backgrounds.

Alex Stanford

Quote from: LadyChaos on December 17, 2009, 12:17:10 AM
Anyone who made the curve theme or someone with the answer I would be eternally grateful.

I'd hate to get rid of the mod just because no one can edit their backgrounds.

Best I can figure is you are going to have to put in a request for this.

LC

Quote from: Alex Stanford on December 17, 2009, 01:53:09 PM
Quote from: LadyChaos on December 17, 2009, 12:17:10 AM
Anyone who made the curve theme or someone with the answer I would be eternally grateful.

I'd hate to get rid of the mod just because no one can edit their backgrounds.

Best I can figure is you are going to have to put in a request for this.
Yep probably so. I mean if there was a way to do it, I would. But it seems the curve theme is on some table or something, making the backgrounds in profiles go behind it. *shrug*

Thanks for the suggestions though.

Arantor

Grab Firefox+Firebug and examine what code it actually is. I suspect it isn't that it's on a table, but that the z-index is not set the same way you'd expect.

I would note that it is being looked at and tweaked for RC3.
Holder of controversial views, all of which my own.


Antechinus

You suspect what is on a table? The background set by the mod? From memory (going off when I had a look at the 1.1.x version of the mod) it isn't. If this mod is not working properly with RC2 I suggest asking the author to update it. Best and easiest option. ;)

ETA: Oh and the changes for RC3 and up wont affect this area.

Arantor

I thought the main profile area wasn't done in tables in RC2+ -- oh wait, it's Ultimate Profile, my bad.

As for RC3, I thought you were changing some of the markup slightly...?
Holder of controversial views, all of which my own.


Antechinus

Yes but she's talking about an option in Ultimate Profile that allows members to set their personal background over the body class background. That would be an overlay on top of the blue gradient in Curve. That bit isn't being changed at all for RC3 +. The UP mod uses it's own templates anyway so shouldn't be affected by changes to Curve's markup.

Arantor

* The Grinch misread it all, sorry.

* The Grinch won't interfere here any longer, doesn't know nearly enough about UP.
Holder of controversial views, all of which my own.


LC

Quote from: The Grinch on December 22, 2009, 03:34:36 AM
Grab Firefox+Firebug and examine what code it actually is. I suspect it isn't that it's on a table, but that the z-index is not set the same way you'd expect.

I would note that it is being looked at and tweaked for RC3.
I will take a look at that, might help me understand how it works exactly.

Quote from: Antechinus on December 22, 2009, 05:54:57 AM
You suspect what is on a table? The background set by the mod? From memory (going off when I had a look at the 1.1.x version of the mod) it isn't. If this mod is not working properly with RC2 I suggest asking the author to update it. Best and easiest option. ;)

ETA: Oh and the changes for RC3 and up wont affect this area.

Well here is why I think it may be the main forum theme, but who knows I could be wrong. When I had 1.1.10 (I upgraded to RC2 before the 1.1.11 patch came out) I noticed that with some custom themes the background customization for profiles would fall behind the theme's main background. But if I used a custom theme that was considered "tableless" It wouldn't interfere with the person's personal background customization of their profile.

For example, when I used the "Siyah inci" theme, the profile customization was possible without the main theme of the forum interfering. But when I attempted the same with "Cargo" and it wouldn't allow the customization of the background in profiles to show up in front until I removed the black background of the theme and left it transparent. Mind you this was back before I had RC2.

Now I am experiencing the same issue with Curve as I did with Cargo, except I really like the pretty light blue color of the main background, it gives the forum structure. If I remove it, I think my forum may suffer visually.

Which is why I made this thread. I was hoping there was an alteration of code I could do, either in the style.css of the theme, or an alteration of the code in UP. I spoke to Yağız about the UP mod as he had ported it to RC2, not JovanT. He was about unsure about it as I was. The start of that convo can be found here at the mod's support/suggestion thread-
http://www.simplemachines.org/community/index.php?topic=298641.msg2383838#msg2383838

Quote from: Antechinus on December 22, 2009, 06:29:01 AM
Yes but she's talking about an option in Ultimate Profile that allows members to set their personal background over the body class background. That would be an overlay on top of the blue gradient in Curve. That bit isn't being changed at all for RC3 +. The UP mod uses it's own templates anyway so shouldn't be affected by changes to Curve's markup.

You are correct. :) You know what I am asking for then.

Quote from: The Grinch on December 22, 2009, 06:30:05 AM
* The Grinch misread it all, sorry.


* The Grinch won't interfere here any longer, doesn't know nearly enough about UP.

Hey you tried, and I am grateful for the assistance, thank you.

Antechinus

Ok, I know what the problem is with the Dziner themes. Bikken uses an extra background div in some of his themes. This isn't actually necessary with the standard layout and graphics. He only includes it to give an extra styling hook if people want to modify the look of the theme. Because the UP mod is looking for the body class, and because that sits behind the extra div, the personal backgrounds are hidden.

The trick, as you found out, is to set the extra div to no background. Something similar should work with Curve. I haven't checked out the RC2 version of this mod yet but my earlier advice stands: get the author to take a look at it. The fix should be very easy and he will need to sort it for current and future versions of 2.0.. 

LC

Quote from: Antechinus on December 22, 2009, 05:34:47 PM
Ok, I know what the problem is with the Dziner themes. Bikken uses an extra background div in some of his themes. This isn't actually necessary with the standard layout and graphics. He only includes it to give an extra styling hook if people want to modify the look of the theme. Because the UP mod is looking for the body class, and because that sits behind the extra div, the personal backgrounds are hidden.

The trick, as you found out, is to set the extra div to no background. Something similar should work with Curve. I haven't checked out the RC2 version of this mod yet but my earlier advice stands: get the author to take a look at it. The fix should be very easy and he will need to sort it for current and future versions of 2.0..
Ok. I am just glad you guys were able to understand what I am looking to do and explain what the issue is. I am happy to know that now. I will try my best to figure it out and I will mention it to UP's author.

I will mark this topic solved. :)

LC

Not sure if the Mod author is willing to do this or not. So  I will be putting up a request in the PAID help area. (Yes, I am willing to pay for this to be fixed.)

Advertisement: