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...
-
TipsCrowdstack uses a responsive grid to make sure that interfaces can automatically adapt to different screen and device sizes. We use Foundation's responsive system . Most of the time, you do not even have to worry about that. But there are a few areas where you really need to be cognizant of the overall page structure and responsive and those include your header, footer, and top banners that are displayed at the top of the page. Each of those items is full-width by default and so they will...
-
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...
-
Tips❤️Crowdstack has pre-loaded Emoticons to use. But you can add new Emojicons (emojis) as well. First, choose which Emojis you want to use. Emojipedia is a good resource . If you're going to add a lot of Emojis, it will be handy to create a document where you've pasted the Emojis and the corresponding keystrokes so that you can just go back and forth copy/pasting. 😀 Grinning Face In your Crowdstack, click on Manage > Settings and in the Design category click on Emoticons. Click on "Add...