Current date/time is Thu Mar 28, 2024 6:21 am

Search found 2 matches for CCC

Our Workshop

Leah7 wrote:HOLY CRAP, those post profile flags look amazing...like woah.  O-O  I had no idea you could code folds, like that!  This is the first time I've ever seen "last child" in code, before.  I will be playing with that some time just to figure out how it all works.  *o*

There's many possibilities since CSS pseudo content was added. Cool The ":last-child" selector refers to the last element of a parent. For example "p > strong:last-child" would style the last strong tag in a paragraph.
Code:
<p>
  <strong>:first-child strong text. </strong>
  <strong>just some more strong text. </strong>
  <strong>:last-child strong text.</strong>
</p>


I added it to the selector set for "a" just in case the user's name isn't strong, and since there's two "a" tags in ".postprofile dt" I added last-child to select the last one only.

Leah7 wrote:Here soon, I'll work on the weird little warning bars I had set up inside those little tabs, so that we can have one for it, too.  :3  Then, that'll be the last of the profile slots that will need a bg.

Either way, I'm probably going to have to make the post profile longer and fiddle with the codes again.  x.x'  Freaking personal title already makes some of the contact icons go off of the box.  Then again, maybe I could just remove all other info from the post profiles and make them only visible in the actual profiles?  That may conserve some space, there...which method do you think would be wiser?

I saw you had them up and was going to work on them, but when I edited the image links to add a selector and saved the field all the images disappeared. I don't know why either. o_O Could you post the image links for the warning bars so I could try that again ? I would've saved the links beforehand if I knew that was going to happen. Dx

What do you think about increasing the profile by about 200 pixels ? I was thinking we should put the profile fields at a fixed height of about 100 or 150 pixels, and add a scroll bar. Here's what the CSS would look like for that :
Code:
.postprofile dt + dd + dd + dd {
  height:100px;
  overflow:hidden;
  overflow-y:auto;
}



Leah7 wrote:I think your drop downs look amazing, good sir.  Amazing.  They don't hurt my eyes and that makes me happy. lol  So nice bonus, indeed.  Even the scroll bars around here aren't too eye-hurty, somehow...

Cool, I'll look into adding the design to the rest of the input fields. I can add some custom scroll bars for webkit browsers if you want. Maybe something like the one below ?
Topics tagged under ccc on Subject to Change  Captur20
Can make it change colors based on the chosen theme too !

Leah7 wrote:As for the profile widget title, I'm totally okay with it being white.  That way, it'll match the other widget titles.  ^^  I didn't even think of that; thank you very much!  You're a pro, as usual.

Righto, I'll add it to the stylesheet. Wink

Leah7 wrote:And yes, I do think just doing transparent text for the icons and buttons will be the way to go, like you did for yours.  I just hope the white won't be too bright?  It doesn't seem too bright on the contact icons, so I think those will be okay.  However, I can also use the dark grey, like what I have for the logo...which do you prefer?  ^^

I agree that white on dark themes can be a bit harsh. I sometimes use either #CCC or #999 for text -- depends how dark the theme is. I think #CCC or something close to it -- but below -- will work perfectly.

Leah7 wrote:I'm guessing the "color=primary/secondary" is from the theme/color changer codes and that's what it uses to identify which color to use?

Yep ! I also used these two colors so it was easier to style the images with CSS. Primary was #69C and seconday was #3.. something -- a darker color. I used secondary mainly for the active buttons like multi-quote and thanks.

Leah7 wrote:Also, is it possible to change the default text for the navigation bar?  If so, I'd like to know how I can change "you have no new messages" to "Messaging" and the "you have a new message" to "New Message."  ^^

Yeah it's possible. We can use CSS to hide the original texts and pseudo content to create new texts. I added the CSS below to the stylesheet. Let me know if it looks okay on your end.
Code:
a.mainmenu[href="/privmsg?folder=inbox"] { font-size:0 !important; } /* hide original texts */

a.mainmenu[href="/privmsg?folder=inbox"]:after {
  content:"Messaging";
  font-size:12px !important;
}

a.mainmenu[href="/privmsg?folder=inbox"] .new-message:after {
  font-size:12px !important;
  color:#B31144;
  content:"New Message";
  background:#111;
  position:relative;
  margin-right:-70px; /* hides "messaging" */
}
by Ange Tuteur
on Tue Nov 22, 2016 11:40 am
 
Search in: Image Testing
Topic: Our Workshop
Replies: 66
Views: 4254

Our Workshop

Leah7 wrote:The widget titles look lovely...thank you so much!  ^^  They are outstanding.  And ARGH.  I didn't even think of any of the code boxes or anything.  x.x'  I've been so focused on trying to decide what to do for all the buttons.  

Cool, no problem. Ah we can work on it as we move along. Wink

Leah7 wrote:I don't honestly have any idea what to do for the drop downs except to make them gray to match all themes, so...feel free to come up with whatever.  xD

Hmm.. I was thinking something along the same lines :
- Text : #CCC
- Background : #111
- Border : #333:default --> #555:hover --> main_theme_color:focus

This is the CSS I've applied to the theme :
Code:
select {
  color:#CCC;
  background:#111;
  border:1px solid #333;
  padding:3px;
  margin:3px;
  outline:none;
}

select:hover { border-color:#555; }
select:focus { border-color:#6B25C1; }

Should be able to see it on the select drop downs now. We could use the same design for the input fields too.

Leah7 wrote:I'd really like to do something different for codes and quotes, something different than usual...maybe some how give them odd shapes like we did with the post profile, somehow?  I'm not sure...what do you think?

I think it'd be interesting to give a try. We can place up to 2 pseudo-elements to give unique effects -- maybe more depending on the child elements that each codebox has.

Leah7 wrote:I also still need to finish the post profiles. O-O  I never did put the BG behind the top slots of the text, like I had in the sample.  I think I was going to ask you if I needed images for the whole tab or just the left sides where it bends around the page...I didn't know if it would be better to use just images or to code in some of it, too.

I actually put in the dark background behind those profile fields because of the fact that the colors could change and all that (and not all of it will look good on the background colors that will change from the theme changer).  I wanted to be sure that it would all be legible, regardless of the theme chosen per user.  

It should be possible with CSS alone. We can use a little CSS trick to create arrows or corners, Chris has some good examples one how it can be achieved here. ANYWAYS I put together a the concept you had -- using a similar method to create the corners -- so lemme know if it works for you. The CSS I wrote is below btw.
Code:
.post { margin-left:10px }

.postprofile dt > strong, .postprofile dt > a:last-child, .postprofile dt + dd > span {
  text-align:center;
  background:#151515;
  display:block;
  position:relative;
  border-radius:3px 3px 3px 0px;
  margin:5px 15px 0px -15px;
  padding:4px 0;
}

.postprofile dt > strong:before, .postprofile dt > a:last-child:before, .postprofile dt + dd > span:before {
  content:"";
  position:absolute;
  left:0px;
  bottom:-5px;
  border-bottom:5px solid transparent;
  border-right:5px solid #0B0B0B;
}

.postprofile dt > br, .postprofile dt + dd > br, .postprofile dt + dd + dd { display:none; }


I'll probably need to make some adjustments to the overflow, because I had to make it visible to show the corners outside of the post bodies.

Leah7 wrote:Is there a way to do that for the "profile" widget title?  To put a dark background just behind the username?  As it stands, the username will change color based on group, as well, so I'd like it to be always legible, if possible.

Oh crap I forgot about that ! Dx On the themes I've made I usually disable the color with the snippet I have below. That way the text remains legible regardless of group affiliation. Which way do you want to do it : background or plain text ? I'm cool with either way.
Code:
.module .h3 > span[style*="color"] { color:#FFF !important; }


Leah7 wrote:@Ange Tuteur
OH WAIT.  You did say we could just make the post buttons just the text and the contact icons just icons and that your theme changer makes the buttons, themselves...should I make the text WHITE, then, to be legible?  Or did you think a darker color would be better?

The thing I did for FAE is that I made images that are white text and transparent, then I'd color the background with CSS depending on the chosen theme.
Topics tagged under ccc on Subject to Change  Captur16

So the browser knew what images to color, I added a special query onto the image URL -- usually something like ?color=primary&size=s so the URL would look like https://i.servimg.com/u/f86/18/21/41/30/quote-12.png?color=primary&size=s

And the CSS looks something like this :
Code:
.contact-info a, .profile-icons a, .buttons a { display:inline-block; }

img[src*="color=primary"] { background-color:#69C; }
img[src*="color=primary"]:hover { background-color:#58B; }
img[src*="color=primary"]:active { background-color:#369; }

img[src*="color=secondary"] { background-color:#345; }

img[src*="size=s"] { padding:4px 6px; }
img[src*="size=m"] { padding:6px; }
img[src*="size=l"] { padding:9px 16px; }

From : https://github.com/SethClydesdale/forumactif-edge/blob/master/css/fa_edge.css#L394

We can use the same method since it'll save you from making a gazillion images per theme color ! Razz
by Ange Tuteur
on Fri Nov 18, 2016 10:59 am
 
Search in: Image Testing
Topic: Our Workshop
Replies: 66
Views: 4254

Back to top

Jump to: