The Side bar (biggest achievement) (Please read :D)

The side bar is probably one of my favorite elements within the Website due to the level of dynamic content and Client based ease of use.

 

To pick up where i was… At this point i had a hardcoded in side bar in a template within embeds. The way i had coded the HTML meant that each “Widget” had a class called Widget which could be repeated for each one. I realised using embeds correctly i might be able to make a coustimizable sidebar with a simple drag and drop approach. I got this idea from enjin when if you want to move a sidebar element above another its a simple WYSIWYG drag and drop.

 

I took each widget and placed it into a new template within a template group called “Widgets”. I then went back to the sidebar and embed them instead this means if i was to hand this over to a client i could teach them which lines of code to drag and drop and if they wanted to move the clander up the sidebar it would be easy without any knowledge of HTML, CSS or EE. This to me was a very professional way of dealing with a content also making the most of the EE Embeds system allowing me to create a WYSIWYG element within a a great CMS. The importance of this meant that also if in the future the client wanted another widget it would be simple enough to create a new template insert code then just embed it into the sidebar.

 

After this had been moved around and i had this new layout i was able to start making the widgets dynamic as all content was the simple hard coded in content. The log in is still hard coded in but this was due to not being able to use this feature with the “Core” version i did however leave the hard coded version in as a place holder for something i might replace in the future. The recent threads i struggled with at first wondering how to achieve this but in the end it was a simple case to actually do just using the the EXp:Channel:entries then just using the Title. I started looking into the author and how you can add this feature in. I was happy to find not only can you add the author you can put in the Profile pic in aswell so using these variables i replaced the hardcoded versions with the EE ones which worked a treat but required some re styling so i spent some time editing this around however in the end i thought ill come back to style after. The posted Date and Time was easy enough with the EE tags.

 

The Calander was probably the hardest element to edit and get working i spent quite a bit of time trying to find a version online that would work how i wanted. I spent time with Shelley trying to solve this issue and although i got one that was telling the date the links wernt working and we had issues. In the end i was able to find in the EE documentation there “Mini Calander” which i put into place however it looked hideous (can be seen here http://ellislab.com/expressionengine/user-guide/modules/channel/calendar.html) they provided you with some CSS which i put in them changed the colour scheme around to suit my site. Now the the calendar works great and the links work showing posts within the month that’s shown and also on the date you pick.

 

The social Links didnt need to be dynamic but i followed Twitters guides and was able to personalize the message that it would put in for the user when opened which was very helpful and i will defiantly use in the future! The links at this point where still different sizes and created using gradients.

 

Now the side bar was dynamic and fitted in with the Site. I went back to the main content made the Blog’s have dynamic post times and dates plus used the author tag correctly. I made many posts at this point to test out the styling with different lengths titles etc for tests.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s