Drop Shadow Effect on aardvark_postit or zebra

Drop Shadow Effect on aardvark_postit or zebra

by Sami Hwang -
Number of replies: 11

Hi!!! I had a conversation with my boss about our theme, and he sounds like he wants to have something clean and visually engaging. I tried Fusion and he asked me to find out two more.  I am thinking about aardvark_postit and zebra.

I guess he likes to have similiar to the design of leaning solution web page and makes it available on I-pad too. (http://www.learningsolutionsmag.com/lscon/content/2086/learning-solutions-conference-2012-home/)

 

  My question is can I add a drop shadow effect at the edge of the column if I use aardvark_postit or zebra? Which theme can be the closest one to achieve this design? The main contents and the drop down navigation bar do not need to be separated. It is not a requirement. Yet, if the design can be available on tablet and mobile, it will be awesome. I do know html and css, and am getting familiar with the file structure of Moodle.

Average of ratings: -
In reply to Sami Hwang

Re: Drop Shadow Effect on aardvark_postit or zebra

by Mary Evans -

Hi,

You should be able to do this in both Zebran & Postit, I am assuming a shadow effect using CSS3?

Do you have a mock up of the sort of thing you are looking for?

An artists impression?

Thanks

Mary

Average of ratings: -
In reply to Sami Hwang

Re: Drop Shadow Effect on aardvark_postit or zebra

by Danny Wahl -

it's not the best because of the way the underlying "holy grail" layout works- but basically it's going to look like this:

#page {padding:5px 5px 0 5px;}

#page-inner-wrapper{box-shadow:0 105px 5px 0 #2F2F2F; overflow:hidden;}

In this example the page-header height is 100px (see zebra theme settings to adjust this) - then add 5px.  Add that to your custom CSS field in the Zebra CSS theme settings.  Play with the values to adjust the size of the drop shadow as you want.

Average of ratings: -
In reply to Danny Wahl

Re: Drop Shadow Effect on aardvark_postit or zebra

by Sami Hwang -

Hello Mary and Daniel,

Thank you so much for your answer.

Let me play with it for a while and get back to this forum.

I really appreciate your advice and help. Have a good day.

Sami

Average of ratings: -
In reply to Sami Hwang

Re: Drop Shadow Effect on aardvark_postit or zebra

by Sami Hwang -

Hello all!

I hope you have a good Friday today. I am trying to make our moodle site similiar to our current external site (http://www.kletc.org) by using Zebra theme. With that being said, I have two questions.

First, can I locate an image between a breadcrumb and a navigation bar on the left column? The image that our director might want to include is a coin image on the left column in http://www.kletc.org.

Secondly, I noticed that if I type some texts in full site namefullname in front page setting,the texts appear between Zebra logo and the main navigation bar. The example can be seen the following site. The text 'S.E.U.S' appears between the logo and the navigation bar http://englishusingsongs.info/login/index.php

I don't want to have the text there. Thus, I remove it and try to save frontpage settings. Then, I got an error message, saying that "Some settings were not changed due to an error." Could you tell me what I missed here? How can I change the setting to remove the text? Please let me know if you have any idea.

 

 

 

 

Average of ratings: -
In reply to Sami Hwang

Re: Drop Shadow Effect on aardvark_postit or zebra

by Mary Evans -

Hi Sami,

1: Yes it is possible to add a logo in the position you require it on your site. However, this needs careful managment of the layout, as you would need to code it in so that the logo sits inside the correct div container, since there are three main containers in the layout. But it is not difficult to do.

The left column background is governed by #page-content, so at a guess you could probably make it the background of that container using CSS...like so...

#page-content { background: #fff url([[pix:theme|logo]]) no-repeat left top;}

Then force the left-hand column down by the height of the logo (200px + 10px)...like so...

#page-content #region-pre { margin-top: 210px;}

2: The fact you are getting an error is that it is a requirement to have a Site Title, and so you have to have some text there. However you can make that text hidden by using CSS...like so...

#page-site-index h1.headermain { display: none;} That hides it on the front page.

I'm in the process of upgrading Post-IT to Moodle 2.3 and removing some old code and replacing javascript with jQuery and adding all images in CSS not hardcoded into the page as Post-IT is at present.

I have added a shadow in the right-hand block column to see what it would look like...see image below. It's easy enough with Post-IT to add a shadow to to page which you can with...

#page { -moz-box-shadow: 5px 5px 2px #aaa; }

But I think it looks nicer in the block...

Block Shadow

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Drop Shadow Effect on aardvark_postit or zebra

by Sami Hwang -

Wow. It looks very nice, Mary. You did a fantastic job as usual. Let me try your advice.

You have a wonderful weekend.

Sami

Average of ratings: -
In reply to Sami Hwang

Re: Drop Shadow Effect on aardvark_postit or zebra

by Sami Hwang -

Mary, you are right again. The text does not appear on the front page.

And if I do not want to see that text appear on other page, I can remove the following tag in general.php

Am I understanding correctly? 

<h1 class="headermain"><?php echo $headeralt; ?></h1>

Average of ratings: -
In reply to Sami Hwang

Re: Drop Shadow Effect on aardvark_postit or zebra

by Danny Wahl -

for the site title just put a space ;)

Average of ratings: -
In reply to Danny Wahl

Re: Drop Shadow Effect on aardvark_postit or zebra

by Sami Hwang -

Hello Daniel,

Are you talking about this tag in general.php?

<h1 class="headermain"><?php echo $headeralt; ?></h1>

Even if I don't use that php tag or put a space, it will be ok. Right?

If you don't mind, can I ask one more question?

Can I put a drop shadow effect to the top and bottom as well?

I played with #page id, but it looks weird. Here is the example of what I am talking about. http://moodle.mylearningspace.me.uk/moodle/login/

I don't need a round corner. The drop shadow effect around the box will be enough. Is there a way we can do it with zebra theme?

 

Average of ratings: -
In reply to Sami Hwang

Re: Drop Shadow Effect on aardvark_postit or zebra

by Danny Wahl -

1) yes, and no - I'm talking about the setting on the settings page (/admin/settings.php?section=themesettingzebra) called "theme_zebra | headeralt".  If you leave that blank, it will display the site name.  You can type "alternate text" there to display whatever you want.  Since you want nothing, just type a space.

2) yes, on the settings page scroll all the way to the bottom and find the setting "theme_zebra | customcss" and then type this:

#page {padding: 10px;}

#page-inner-wrapper {box-shadow:0 0 10px 0 black; overflow: hidden;}

and save your changes.  Most of what you're asking doesn't require you to change any of the source code - it can all be accomplished through the theme settings page.

Average of ratings: -
In reply to Danny Wahl

Re: Drop Shadow Effect on aardvark_postit or zebra

by Sami Hwang -

Hello Daniel,

Thank you so much for your clear explanation. I don't know how skip your hint. I will get back to you and Mary with more questions next week.^^

You did a great job for creating this theme. Very user friendly...

Average of ratings: -