Stephens Blog: css

Showing posts with label css. Show all posts

Sunday, 8 February 2015

jquery pullout slide animation

This is my first lesson in jquery.

Basically what I want is a slider which is mostly hidden on the left, and when you hover over it pulls out to reveal all.

After going on W3CSchools for 30 mins I botch'd up this code:

$(document).ready(function(){$("#square").hover(function(){ $("#square").animate({ left: '+=100px' }); }, function(){ $("#square").animate({ left: '-=100px' }); }); });

Saturday, 7 February 2015

Drupal views slideshow image as css style background

Thought I'd document this as I will probably do this in future developments.

I wanted a views slideshow, with the images appearing full screen with text ontop. It appears simple at first but actually required more digging.

Backstretch does not work with views slideshow, as it applies the image background to elements not within the slideshow.

I found a slightly helpful article which suggested a fix, but later found the forum from where more helpful information was taken.

to sum it up, you need views to output the url of the image for the field, and then use a views template override to get this url and 'render' it inside a html element as the background-image style.

To do this:

Get views to output the url of the image

in the views view, add a Relationship

this needs to be a 'File Usage: file'

next add a field '(file) File Path

in this field, tick the box titled:

Display download path instead of file storage URI

Now to render this URL inside a HTML element you need a template override

In views veiw, go to 'Other' > 'Theme' > 'Information'

find the template override for the field
create a new file with that exact name and place it in your theme

inside this file paste this:

<div class="mainImage" style="background-image:url('<?php print $output;?>');"></div>

Done

You can now style this .mainImage div as:

.mainImage {

position: fixed;

height: 100%;

width: 100%;

top: 0px;

left: 0px;

z-index: -2000;

background: no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

sorted.

It now changes with the views slideshow.

Tuesday, 21 January 2014

Joomla 3 template and bootstrap

So, after making a nice template the same as I'd done in Joomla 2.5, there are some slight differences when you log onto the front-end. Noticably that the cute little icons of yesterday are gone.

Reading into it, there's this new thing called BootStrap. Very good once you get the hang of it. I found a nice tutorial on it here

The main things to do to get bootstrap are:

In the index.php file for your template, right at the top include (tutorial here):

$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');

Secondly, make sure the including your stylesheets here

)

Just be sure to override stuff in your template when it pops up.

Monday, 6 January 2014

Joomla changing background image depending on menu item

So I want to change the background picture depending upon the page you're on. When I first looked at the problem I thought it'd be easiest to create a Page Class on the menu item, and then within the content area, make an item which appears behind everything (z-depth) and fills the whole screen. The proved quite difficult.

Turns out there is a much easier way, still using the Page Class on each menu item. Found the answer here in a forum, and here in a Joomla Help Page.

Basically, you can use PHP to find the page that is being displayed, and put the class suffix anywhere in the document, i.e. in the

put this code inside the head tag:

<?php $app = JFactory::getApplication(); $menu = $app->getMenu()->getActive(); $pageclass = ''; if (is_object($menu)) $pageclass = $menu->params->get('pageclass_sfx'); ?>

Put this in the tag you want a class to. I.e. the body tag:

<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">

You can also add another stylesheet to keep the css even more streamlined. Sorted! (oh, by the way, I havent tested any of this!!!!)

Well, after leaving it a while I came up with a problem. The specific page I want to change is a "featured-blog" menu item, so when I put the Page Class, I have to put a space to separate it from the word 'featured-blog'.

But alas, the pageclass picks this up! I had to get a php line in which trimmed the spaces from the pageclass:

$pageclass = trim($pageclass);

Monday, 11 February 2013

Joomla drop down menus

So I want to create drop down menus. Not having done this on a basic website it's worth looking at "Son of Suckerfish". Here's a nice article they've written for htmldog.com.

So, the best way is to do it with the template, but another way might be to use extensions. Ive found this one called "Matic Menu" which looks very nice.

Art tool light looks quite easy to implement. Only trouble is that it applies to alltemplates. I'd rather have it only switch on for the template it was meant for.

Monday, 30 July 2012

Creating a Joomla Template

So, I've made a few websites in Joomla now, but I've only been able to 'cobble' them together either by editing existing templates, or by deleting content from a traditional website I've made and putting the right code it.

This second way is close enough to the real thing. I've found this nice tutorial on how to do it for Joomla 1.5. But it's not too different from the latest version (2.5).

I think the easiest way is to have your own machine setup as a webserver (see this blog on setting that up) and editing the files locally, and easily seeing what Joomla makes of it by viewing the pages through the web browser.

On top of this I found this youtube video explaining how you can setup dreamweaver to interact with the website locally so you can edit all files in dreamweaver. To do it:

Set up a new site in Dreamweaver
edit the local folder to that of the joomla site
in server enter the web URL which you need to type in the browser to access the site
Make sure you tick the "testing" box

Here are some screenshots:

locate the local root folder for that particular joomla website

enter the weburl that the computer has to go to view the website

Make sure to tick the "testing" box.

If you havent got a new template in the joomla site yet, just create the folder within the templates folder, make index.php and templateDetails.xml files (found tutorial here), then go to extensions > extension Manager > Discover > press Discover button. If you're templateDetails.xml file is the correct format then you should see it in the list. Tick and click install.

To edit a template:

load up its "index.php" in it's own template folder
click "live view"
click yes to the dialogue box
you will need to change the address of the viewing page to the root of the joomla site. i.e. you are editing the main template, which changes the whole site. So you view the website like normal

I did have a few problems refreshing whatever changes I'd made. The simplist was to just go to File > Save All, which would then work.

Tuesday, 14 February 2012

Joomla notes

Thought I'd best take some notes because I might just forget how I ever did it. So:

Make a module for everything you want to place on the page, with exception to the articles

Theres a Banner module
theres a search module
theres a menu module
etc

These modules require you to designate them a position. This is set out in the template you are using. If you change template you'll have to change all the position. (there always named differently)
To view the positions, I found this forum. Basically in templates, go to options, switch on "preview positions" then whereever you are on the actual site, just put "?tp=1" without the speech-marks.
When in the menu manager you can assign different menus to different modules. I think this is so you can have a few different menus for different areas. All you'd have to do is make another menu module and put that in a different position.
To edit a templates stuff, I saw on a tutorial that there are lots of options which come with every template. I couldn't find these with Beez template, but with all you can edit the html, and also the css. So it's totally changeable!

I shall add to this list of useful hints over time.

Saturday, 11 February 2012

which Content Management System to use?

What with all the new websites about these days, with constantly updating and interactive elements, it is too daunting to learn php or asp so why not use a content management system?

Well, I think I'll try some out and then I'll be more able to answer that question. I had a quick look around and found this informative blog, which gives a nice little list of free ones. Here are some of the most popular and nice looking, and almost most importantly, free:

I'll carry on here when I've had some playing about.

Well, I'm still having a good look at Joomla. Seems good but a little complicated when you first have a look at it. I'm finally getting there. Here's what the joomla site currently looks like.

I've just found this wiki which describes how to begin templating, which is ultimately how I will make the website. It'll take a bit of getting used to, but essentially all I'll have to get used to is using the special php references to put the content in. You then use CSS to style all the html you made in the template.

Whilst looking through the joomla wiki I found that it might be easier to start off editing the "beez" template, which they claim to be highly adaptable! Heres the wiki

Monday, 23 January 2012

JQuery sliders to control image sizes on a webpage

I'm currently making a web gallery and want users to be able to resize the gallery to their needs. I did a quick search on Google and found this:

http://webdesignledger.com/tutorials/create-a-resizable-image-grid-with-jquery which has this as a demo:

http://demos.webdesignledger.com/jquery_image_grid/example2.htm

Looks quite good, although I noticed it also increases the gaps between the images which I would prefer to control. But might be worth tweaking!

I've had another look and also found this which looks remarkably similar:

http://agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-javascript/

It gives a nice little tutorial on what you have to do.

Friday, 9 September 2011

WallSpaceVidualArts coming soon

Just made the coming soon front page for the website www.wallspacevisualarts.co.uk. All works well, apart from in Firefox 4.0.1. Have a look at this:

Firefox 4.0.1 in background, Safari 5.0.4 in foreground. Notice you can't see the bottom email address in Firefox, and the last part of the phone number

Looks like Firefox 4.0.1 either makes the text too big, or makes the gaps (padding and margins) too big. Quite frustrating. Might be because I used em's for the font size?

Yep, worked it out in the end:

Firefox 4.0.1 in background, Safari 5.0.4 in foreground - fixed inconsistency

So, I started by changing margins which had no effect. I then tried changing font size from 'em' to 'pt', but this didn't work either. Finally tried the old 'line-height', changing from 'em' to 'px' which fixed it. Safari and Firefox are not the same when it comes to 'em's and 'line-height'. I still don't exactly know what 'em' means, but I'm sure I'll look it up one of these days.

Also to note was the slight differences in title formating. I used h1, h2 and h3 for the headers and footers, and there was a slight inconsistency with margins on them. Had to set them to 0px.

Also, for the "JOHN KING" text and phone number, I put a little bit of 'word-spacing' using 'em's, this is inconsistent between these browsers, so I changed it to 'pt'.

I also manually changed the margins for the '
' paragraphs. This is what gives it a bit of space at the top and bottom. I manually changed these so that I could determine the exact distance between the top and bottom of the main text.