News:

Wondering if this will always be free?  See why free is better.

Main Menu

Unlink? How to?

Started by liltitan16, October 03, 2015, 03:36:51 PM

Previous topic - Next topic

liltitan16

So... i'm trying to change my code :

#sp_main
{
   width: 100%;
   border-spacing: 5px;
   table-layout: fixed;
   background-color: #0A0404;
   background-image: url(theme/blahhh.png);
}

Everytime i change the Transparency of the image , it also changes the whole transparency of my body and text and all.... Some how it's linked.. idk how to change this

I'm very new to this. So any help is greatly appreciated :)

liltitan16

bump .. still looking for an answer

Kindred

URL?


Also, please do not bump your post like that... especially not after only 2 hours. This is not a "real time chat" site...
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

liltitan16

Quote from: Kindred on October 03, 2015, 05:44:56 PM
URL?


Also, please do not bump your post like that... especially not after only 2 hours. This is not a "real time chat" site...

Sorry, just seems my images are all linked together... so when i shrink one or move it.. it moves the others

Kindred

Probably...   That's how relativ positioning divs works...
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

liltitan16

Quote from: Kindred on October 03, 2015, 07:52:16 PM
Probably...   That's how relativ positioning divs works...

how do i unlink them?

Gluz

URL of your forum to check that live?

If the image you are using for that is a multi image sprite, then changing the transparency of that will affect the others that use the same image but different part of it, that's why we need to check that live.

liltitan16

Quote from: Gluz on October 03, 2015, 08:22:24 PM
URL of your forum to check that live?

If the image you are using for that is a multi image sprite, then changing the transparency of that will affect the others that use the same image but different part of it, that's why we need to check that live.

I sent URL to you

Kindred

Well, it's not likely to be the image... Because he's changing the CSS...
it could be a CLASS of CSS that he is changing...  That would affect any other entries that share that class.

And changing the size or positioning of a relative div will affect the other divs around it...
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

liltitan16

Quote from: Kindred on October 03, 2015, 08:38:58 PM
Well, it's not likely to be the image... Because he's changing the CSS...
it could be a CLASS of CSS that he is changing...  That would affect any other entries that share that class.

And changing the size or positioning of a relative div will affect the other divs around it...

Yup, that's exactly what it's doing..i've fought and fought .. still can't figure out how to only Move the one i have selected :|

FYI ~ I'm Using BluePen, to do most of my edits in realtime.

Gluz

But #sp_main is an ID not a CLASS, so should just affect one thing, as SimplePortal only have one instance of that in the main page.

When you say that you change the transparency of the image, you mean edit the image in an image editor and change the transparency there? or just change the opacity in the #sp_main CSS, because opacity affect all the content in the div and that is not the right approach to make some div background more or less transparent.


I didn't understand BluePen, was too laggy for me, just use DevTools of Firefox/Chrome and look for the code to change whatever need to be changed and view it live, then edit the files. Sometime that LiveView Editors mess someting when you allow them to modify directly the files.


Also, you say in your MP that you are trying to move the logo at the top, but move the where? you mean move the news below the logo? because that is different and is not a CSS part but a template that need to be edited to get the News div out of the header where is the logo.

liltitan16

#11
Quote from: Gluz on October 03, 2015, 09:20:45 PM
But #sp_main is an ID not a CLASS, so should just affect one thing, as SimplePortal only have one instance of that in the main page.

When you say that you change the transparency of the image, you mean edit the image in an image editor and change the transparency there? or just change the opacity in the #sp_main CSS, because opacity affect all the content in the div and that is not the right approach to make some div background more or less transparent.


I didn't understand BluePen, was too laggy for me, just use DevTools of Firefox/Chrome and look for the code to change whatever need to be changed and view it live, then edit the files. Sometime that LiveView Editors mess someting when you allow them to modify directly the files.


Also, you say in your MP that you are trying to move the logo at the top, but move the where? you mean move the news below the logo? because that is different and is not a CSS part but a template that need to be edited to get the News div out of the header where is the logo.

I'm trying to Move the logo at the top and center it, Eventually i might change it and move it to the left side.. but when i try to move it All the other little images on the forums move also.

As for the Transparency , i got that to work correctly. Just having problem with the logo now

the logo is connected through :  a img {  when i move it using padding and such it also moves things such as my Profile pic, shoutbox icons exc..

And as for the Devtools firefox/chrome and such... I'm just starting to learn css codeing , php, exc... I have no clue how to do this all without my Simple editor tool lol. But i'm going to give it a try , But for now i have to get off , take a shower, and get ready for work in the morning. Thanks for the Feedback :)

Gluz

Oh, that's the key, a img { just define all img elements inside of an anchor, that are a lot, so you should not use that to move or change things to the logo, instead use #logo a img { because that uses the logo ID that is only in one div and goes directly to the logo image that you want to move.

There is no #logo a img { rule in your index.css so you need to add it to the end of the file (or just below the #logo definition) to get it working on the live site.

The basics for design/styling is to know basic HTML (elements, and when to assign ID and CLASS) and then combine with CSS to define style per tag, then per class and finaly per ID that should be only once in the page and that's how you modify just one specific thing. If the element has no direct ID just search for a parent, just as I do whit this case, the parent DIV have the logo ID, then specify the elements to get to the specific thing, so no other element will be affected by that rules.

liltitan16

Quote from: Gluz on October 03, 2015, 10:25:48 PM
Oh, that's the key, a img { just define all img elements inside of an anchor, that are a lot, so you should not use that to move or change things to the logo, instead use #logo a img { because that uses the logo ID that is only in one div and goes directly to the logo image that you want to move.

There is no #logo a img { rule in your index.css so you need to add it to the end of the file (or just below the #logo definition) to get it working on the live site.

The basics for design/styling is to know basic HTML (elements, and when to assign ID and CLASS) and then combine with CSS to define style per tag, then per class and finaly per ID that should be only once in the page and that's how you modify just one specific thing. If the element has no direct ID just search for a parent, just as I do whit this case, the parent DIV have the logo ID, then specify the elements to get to the specific thing, so no other element will be affected by that rules.

Alright cool i'll check this out thanks :)

Advertisement: