CSS learning resources, free and cheap
Rosemary O'Neill
Crowdstack
-
Tips❤️A common design choice is to uppercase all letters in the top navigation menu. You can easily do this on your site by adding this custom CSS to your theme: table.horizontalMenu { text-transform: uppercase; } To add this, go to...
-
Tips❤️By default, the main navigation menu is displayed ABOVE your site header. It is also full width by default, like so: Below, we will offer some tips for changing the appearance and positioning of your main nav menu. Left Align The Menu To position your menu text so it is aligned left instead, add this CSS: nav#top_nav_bar ul.right { float:left !important; } nav#top_nav_bar ul.right > li > ul.dropdown { left: 0; right: auto; } Your menu will then look like this: Center Align The Menu To...
-
TipsHello Everybody, Opening links in new windows is trivial once you know what you are doing. Simply add a target="_blank" attribute to any link (a element) and you have yourself a link that will load in a new window. Example: <a href="http://socialstrata.com" target="_blank">Example</a> So seeing how simple it is you might be asking yourself why do we need a tip? Well its simple, a lot of the HTML for Crowdstack is out of the site administrators direct control. Meaning there will...
-
-
Tips❤️"How to put a widget in the main left column of the homepage" was one of the first questions I asked Hoop about during Beta, and I have seen many others ask the same question since. Answer: you can't put real widgets there. But I did figure out how to 'fake' one there --which also has the side option of creating 3 columns, if you like that sort of thing. Why? We like the idea of more custom content in the Main Left Column (aka " MLC "), and less of the preset content blocks feeding...
-
TipsA common approach with footers is to have 4 columns that contain segmented lists of links (product info, company info, etc.), logos, etc. You can still keep your four-column footer, but you'll want to make sure that it is responsive, automatically shifting columns for smaller screens. The overall goal is to have 4 columns on large grids (large screens), 2 columns on medium grids (like tablets), and 1 column on small grids (typically phones). To handle this, create nested grids- an outer grid...
-
TipsFrom a design perspective, i think it looks good to have your forum names bolded along with the titles of the topics. To do this, just add the following to your Custom CSS section found on this page: YOURSITE.hooplaupgrade.com/cp/display-settings .h-forum-name {font-weight: bold;} .h-topic-title {font-weight: bold;} I implemented this on my site and it looks good. Enjoy!
-
TipsI just found this cool (mostly free) tool that helps you pull a dynamic photo feed from Twitter, Instagram, and/or Facebook. If you use their Pro version, it also includes custom CSS and moderation tools. You can paste their embed code into custom content blocks or custom widgets, or into the header or footer of your Crowdstack site. Options include scrolling banners, grids, and map style. SnapWidget If you decide to try it out, come back and share your design!
-
Tips❤️Depending upon your site's design you may want to change the new default avatar display so that all initials appear the same color. With a bit of CSS you can do that. Copy the following into your Display Settings > Custom CSS box .default-member-avatar-container circle, .default-member-avatar-container rect { fill: gainsboro !important; } In this example "gainsboro" is a greyish color (#dcdcdc for those keeping score). You'll find a large listing of colors to chose from here . You can...