Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 g-id coding help
#
I am trying to use g-<!-- |g_id| --> to target member group colors for my mini-profile and main profile. Not sure if I am doing it right, but it seemed to be working earlier and now it's not anymore.

MINI-PROFILE:
CODE
<div id="g-<!-- |g_id| -->"><center><div class="mp2"><div class="mpname"><a href='index.php?showuser=<!-- |id| -->'><!-- |author_name| --></a></div></div><div class="mp1"><div class="mp3"><div class="mp4"><div class="mp4a"><div class="mp4c"><span><!-- |field_2| --></span> years old</div><div class="mp4c"><!-- |field_3| --></div> AT <div class="mp4c"><!-- |field_12| --></div><div class="mp4c">played by <span><!-- |field_1| --></span></div><div class="mp4c"><span><!-- |posts| --></span> posts <i class="fa fa-rocket" style="margin: 0px 3px;"></i> <span><!-- |status| --></span></div><div class="mp4b" style="background-image: url(<!-- |field_14| -->);"></div><div class="mp4c"><span><!-- |field_9| --></span> </div><div class="mp4c"><span><!-- |field_17| --></span> </div><div class="mp4c">goes by <span><!-- |field_4| --></span> </div></div></div></div><div class="mpbg" style="background-image: url(http://placehold.it/250x400)"><img src="<!-- |field_13| -->"></div></div>
<div class="mp4d"><a href="index.php?act=Search&CODE=getalluser&mid=<!-- |id| -->"><i class="fa fa-pencil"><small>View Posts</small></i></a><a href="<!-- |field_7| -->"><i class="fa fa-star"><small>shipper</small></i></a><a href="<!-- |field_15| -->"><i class="fa fa-user"><small>wanted</small></i></a><a href="index.php?act=Msg&CODE=04&MID=<!-- |id| -->"><i class="fa fa-envelope"><small>PM</small></i></a></div></center></div>


And this is just the portion from the CSS that uses the different member group id's:

CODE
#g-17 .mp2, #g-17 .mp4d i small  { background-color: #D78A8A; }
#g-17 .mp4d i, #g-17 .mp4c span { color: #D78A8A; }


What I want happening: only group 17's .mp2 (and other parts of the mini-profile) is viewed as the color #D78A8A by everyone, no matter their group

What's actually happening: group 17 is viewing .mp2 (and other parts of the mini-profile) as the color D78A8A for member groups that are and also aren't group 17

This post has been edited by sidsidsid: Oct 19 2016, 10:10 AM
PM
#
Hi there! First, do you mind providing a link to the board so we can see if something else in the CSS or HTML is affecting it? It'll also help us identify the issue easier. ♥

signature
user posted image
sweet serenity, a sailor moon roleplay 
PM
#
Can you show us all of the CSS relating to this?

signature
#
link to forum

CODE
/****************************************
Mini Profile by Ree of SHINE
*****************************************/
.normalname { display: none; }
.mp1 { position: relative; width: 250px; height: 400px; overflow: hidden; }
.mp2 { width: 240px; padding: 45px 5px; background-color: #98c59e; text-align: center; line-height: 100%; border-top: 3px solid #ddb5cd; color: #ffffff; }
.mpname { font-family: crushed; font-size: 28px; font-weight: 400; font-style: normal; text-align: center; text-transform: lowercase; text-decoration: none; letter-spacing: 1px; word-spacing: 2px; line-height: 100%; }
.mpname a { color: #fff; }
.mp3 { position: absolute; top: 400px; left: 0px; width: 230px; height: 380px;  padding: 10px; z-index: 2; -webkit-transition: .6s ease-in-out; -moz-transition: .6s ease-in-out; -ms-transition: .6s ease-in-out; -o-transition: .6s ease-in-out; transition: .6s ease-in-out; }
.mp1:hover .mp3 { top: 0px; }

.mp4 { width: 220px; height: 380px; box-shadow: 0px 0px 5px rgba(0,0,0,0.3); }
.mp4a { width: 220px; height: 360px;  background-color: #f7f7f7; padding: 10px 0px;  }
.mp4b { width: 180px; height: 100px; padding: 6px; background-color: #fff; border: 1px solid #f3f3f3;  margin: 10px auto 15px; background-image: url(http://placeholt.it/180x100); background-size: cover; }


.mp4c { width: 180px; padding: 5px; background-color: #fff; color: #565656; font-family: crushed; font-size: 10px; font-weight: 400; font-style: normal; text-align: center; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 100%; border: 1px solid #f3f3f3; margin-bottom: 5px; }
.mp4c span { color: #ddb5cd; letter-spacing: 1px; }

.mp4d { width: 250px; height: 30px; font-size: 20px; line-height: 30px; }
.mp4d i { padding: 3px 15px; background-color: #f8f8f8; border: 5px solid #fff; outline: 1px solid #e1e1e1; text-align: center; position: relative; }
.mpbg { position: absolute; top: 0px; left: 0px; width: 250px; height: 400px; z-index: 1; -webkit-transition: .6s ease-in-out; -moz-transition: .6s ease-in-out; -ms-transition: .6s ease-in-out; -o-transition: .6s ease-in-out; transition: .6s ease-in-out; background-image: url("http://placeholt.it/250x400"); background-size: contain;   background-position: center; }
.mp1:hover .mpbg { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url(grayscale.svg); filter: gray; filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); }

.mp4d i small { display: none; padding: 3px 5px; color: #fefefe; font-family: crushed; font-size: 13px; font-weight: 400; font-style: normal; text-align: center; text-transform: lowercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 100%; border-radius: 3px; text-indent: 0;   background-color: #ddb5cd; }

.mp4d i:hover small { display: block; position: absolute; left: -5px; margin-top: 5px; z-index: 9; -webkit-animation: bubblein .25s linear; -moz-animation: bubblein .25s linear; animation: bubblein .25s linear; }


@-moz-keyframes bubblein {
0% { -moz-transform: scale(0,0); opacity: 0; }
50% { -moz-transform: scale(1.2,1.2); opacity: 0.3; }
75% { -moz-transform: scale(0.9,0.9); opacity: 0.7; }
100% { -moz-transform: scale(1,1); opacity: 1; }; }

@-webkit-keyframes bubblein {
0% { -webkit-transform: scale(0,0); opacity: 0; }
50% { -webkit-transform: scale(1.2,1.2); opacity: 0.3; }
75% { -webkit-transform: scale(0.9,0.9); opacity: 0.7; }
100% { -webkit-transform: scale(1,1); opacity: 1; }; }

@keyframes bubblein {
0% { transform: scale(0,0); opacity: 0; }
50% { transform: scale(1.2,1.2); opacity: 0.3; }
75% { transform: scale(0.9,0.9); opacity: 0.7; }
100% { transform: scale(1,1); opacity: 1; }; }

/********
HERMES
********/

#g-17 .mp2, #g-17 .mp4d i small  { background-color: #D78A8A; }
#g-17 .mp4d i, #g-17 .mp4c span { color: #D78A8A; }

/********
DIONYSIS
********/

#g-16 .mp2, #g-16 .mp4d i small  { background-color: #ffb1aa; }
#g-16 .mp4d i, #g-16 .mp4c span { color: #ffb1aa; }

/********
HEPHAESTUS
********/

#g-15 .mp2, #g-15 .mp4d i small  { background-color: #fad9aa; }
#g-15 .mp4d i, #g-15 .mp4c span { color: #fad9aa; }


/********
APHRODITE
********/


#g-14 .mp2, #g-14 .mp4d i small  { background-color: #E6A983; }
#g-14 .mp4d i, #g-14 .mp4c span { color: #E6A983; }


/********
ARES
********/

#g-13 .mp2, #g-13 .mp4d i small  { background-color: #e295be; }
#g-13 .mp4d i, #g-13 .mp4c span { color: #e295be; }

/********
ARTEMIS
********/


#g-12 .mp2, #g-12 .mp4d i small  { background-color: #9C84AE; }
#g-12 .mp4d i, #g-12 .mp4c span { color: #9C84AE; }

/********
APOLLO
********/

#g-11 .mp2, #g-11 .mp4d i small  { background-color: #83A2E0; }
#g-11 .mp4d i, #g-11 .mp4c span { color: #83A2E0; }

/********
ATHENA
********/

#g-10 .mp2, #g-10 .mp4d i small  { background-color: #62bae9; }
#g-10 .mp4d i, #g-10 .mp4c span { color: #62bae9; }

/********
DEMETER
********/

#g-9 .mp2, #g-9 .mp4d i small  { background-color: #76d4cc; }
#g-9 .mp4d i, #g-9 .mp4c span { color: #76d4cc; }

/********
POSEIDON
********/

#g-8 .mp2, #g-8 .mp4d i small  { background-color: #8abeaa; }
#g-8 .mp4d i, #g-8 .mp4c span { color: #8abeaa; }

/********
HERA
********/

#g-7 .mp2, #g-7 .mp4d i small  { background-color: #bad591; }
#g-7 .mp4d i, #g-7 .mp4c span { color: #bad591; }

/********
ZEUS
********/

#g-6 .mp2, #g-6 .mp4d i small  { background-color: #7bb179; }
#g-6 .mp4d i, #g-6 .mp4c span { color: #7bb179; }

/********
UNSORTED
********/

#g-3 .mp2, #g-3 .mp4d i small  { background-color: #999; }
#g-3 .mp4d i, #g-3 .mp4c span { color: #999; }

PM
#
can someone help me with this? I still haven't figured out what is wrong.
PM
#
This appears to be working as it should, for me.
PM
#
Same for me, did you get this solved?

signature
email: admin@jcink.com :: blog: John C.
#
Okay, I signed out to view as "guest," and it looks like it's working fine.

When I sign in as admin, it works fine too.

however, If I sign in as groups 3 and 6-17, all the mini-profile .mp2 (and other g-id stuff) is the same exact color for every member group.

ex: the .mp2 section for the g-11, Apollo, account is viewed as #999 when I view it as g-3, unsorted. it's #999 for all g-id's 6-17, even though it's supposed to be its own colors? not 3's #999. I hope my issue makes sense!

is this happening because I didn't set up a g-id for admin and guest?

This post has been edited by sidsidsid: Oct 26 2016, 10:54 AM
PM
#
I'd suggest logging in as a member from one of the groups 6-17 and seeing what the variable ID comes up as, eg g-17. It may be an unexpected numeral.
PM
#
i'm not sure I understand this suggestion
PM
#
Now that I look at it again, I think it may be because you've set up the miniprofile to have an ID of "g-X", and that ID already exists for the body (<body id="g-X">). IDs must be unique, versus classes which can repeat - and technically the body ID is a parent to the .mp2 classes of the miniprofile as well, so trying to selectively target it would not work well. Change the miniprofile's element to a unique identifier, and we can go from there?
PM
#
i'm very sorry, every word is going five feet over my head. I don't see body id anywhere, i'm lost. do you mean in the beginning where I did <div id="<g-id>"> ? if I change that, how to I target .mp2 to change?

http://shine.jcink.net/index.php?showtopic=28645

that is the template I am using, I only made minor changes, this template has that div id too.

I am using another template now, so it is not an issue anymore, I just wasn't sure what I did wrong for it to not work, because it's only working for guest and admin, not anyone else.
PM
#
It's not a problem.

I've circled what I believe to be your issue in the image below:
user posted image

As you can see, your code is using the same template for naming the IDs: g-X, where X is the group number. In your wrappers, they will appear as something akin to g-<!-- |g_id| -->. As you likely know, when used this way the <!-- |g_id| --> variable will create a unique CSS selector for each member group, which is what allows you to color them separately (or, will allow you to).

The problem I think you are having is that, when logged in with certain groups (those groups that do have the CSS selectors to change the miniprofile color like #g-6 through #g-17), the body and the miniprofile element get mixed up because they obey the same naming scheme.

When a user in say group 8 logs in, the body element is named #g-8, and the miniprofiles are named individually for the posters: #g-9, #g-7 so on and so on. The problem is, CSS is a cascading code, and IDs are only applied to one element (IDs and classes differ in that while you may have a dozen elements with all the same classes, you may only have one element with any specific ID).

What happens when the browser renders the CSS style for #g-8 .mp2, it looks for and finds #g-8 as the body element, and not the miniprofile element, because the body element is higher in the hierarchy and 'comes up' first. It then looks for a subsequent .mp2 element, which it finds, ironically, in the miniprofile structure #g-8 .mp2 -- But, since it has already found #g-8 on the body element, the specific variable structure of the miniprofile is ignored and all .mp2 elements have the CSS style applied to them, because all of the miniprofile .mp2 elements are 'children' of the body which has the ID that the style looks for.


TL;DR: Try changing the miniprofile elements' variable ID to be something like "mp-<!-- |g_id| -->", and rename the CSS styles accordingly.

This post has been edited by DustBucket: Nov 3 2016, 02:37 PM
PM
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll