Current date/time is Thu Mar 28, 2024 6:41 pm

Search found 1 match for 555

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 555 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: