Sunday, 30 November 2014 00:00

My HTML Notes

Display Types for elements

display: inline - removes the cariage return from the begining and end of a div
display: inline-block - maintains its block properties while staying inline
when using 'block mode' they need their width and height for aligning
If you absoultely must use a <div> as an inline element, you can set the following in your stylesheet, off course that essentially makes the <div> a <span>.

div {display: inline;}

<IMG>

http://www.w3schools.com/TAGS/att_img_align.asp

The <img> element is an inline element (it does not insert a new line on a page), meaning that text and other elements can wrap around it. Therefore, it can be useful to specify the alignment of the image according to surrounding elements.

<SPAN>

<span> is inline, no new line, no fixed size, cannot give it fixed size parameters except width?
<span> the inline version of <div>.
it is manily used for assigning styles to groups or elements because it has no size.

<P>

<p> is block element, new line, no wrapping, cannot go inside a paragraph, can go inside a <div>, its default size is 100% wide

<DIV>

<div> is block element, new line, no wrapping (oppposite of span), cannot go inside a paragraph, can go inside a <div>, its default size is 100% wide
divs are block elements and unless otherwise stated will be 100% with a CR at the begining and one at the end

To center a div in its parent

the key to getting it to work is it must have a defined width (otherwise techincally the width is defined as 100%)

<div style="width: 75%; margin: 0 auto;">center</div>

Center an Image

this will center the image because the <p> is 100% wide

<p style="text-align: center;">
	<img style="margin: 10px;" src="/images/pages/home/me-and-holly-on-chisel-beach.jpg" alt="me-and-holly-on-chisel-beach" />
</p>

text-align:center; is still valid - http://www.w3schools.com/cssref/pr_text_text-align.asp - this is set in the parent element and affects the child element.

How to center an item - the modern way

{display: block; margin-left: auto; margin-right: auto}
{display: block; margin: 0 auto} /* this is prefered option */

The centering will not work unless the element has a defined width. margin: 0 auto; needs a fixed width to work, or %
This allows the browser to dynamically work out where the element should be and then sets the margin to cause that element to center. It works exactly like text-align: center; except, i think works on more stuff. Also this is applied on the element it is added to, not the child.
This statement can also vertically center items, but remember it needs to have a specified height to work.

Floating

Floating is a new way of aliging stuff on a page. Floating works like the tetris game except that the blocks float upwards and you can only say wheather the blocks float to the left or the right. A floated block will float up as far as it can (ie if their is room) and then push as far as it can to the side you chose.

NB:

when you float an element, it becomes a block
Once a float is set it needs to be cleared.

Types of Clearing

Clearing is when you have had enough of it you put a line under it and this create a new ceiling where any new float will hit as though it was the top of the browser.
There are 3 types of clearing left/right/both. Imagine this ceiling can be sepearated in to 2 halfs. This option allows you to create a new ceiling on either side of the browser or the more common clear:both which does boths sides.
There is only 1 type of clearing with 3 options left/right/both but you can do it in several ways, these are the common ways of clearing

<br style="clear: both;" />				<!-- to be put inside block elements such as <p> & <div> -->
<br style="clear: both;">&nbsp;			        <!-- to be put inside block elements such as <p> & <div> -->
			
<div style="clear: both;">&nbsp;</div>	                <!-- &nbsp; prevents the element being eaten by wysiwyg -->
<p style="clear: both;">&nbsp;</p>		        <!-- &nbsp; prevents the element being eaten by wysiwyg -->

Notes about <br>, wysiwyg and clearing

putting <br style="clear: both;" /> at the end of the paragrapgh causes jce to remove it because it is an empty element.
so use <br style="clear: both;">  the escaped space at the end prevents wysiwyg editors stripping the last tag because it is not empty
only block elements can clear floats
parent with only child floats will cause it to collapse/hide - fix = overflow: auto

Published in HTML

Sunday, 30 November 2014 00:00

Images with Titles

The following are examples on how to put a titlesunderneath or on the side with images vertically or horizontally aligned. This sometimes does not go as easily as planned so these examples should cover all scenarios.

Horizontal

Inline - Horizontal lists with text centered underneath the image.

The whole logo block is centered. do i need all the centering statements. these items will stay centered and will eventually stack vertically when squashed.

<div style="text-align: center;">
	<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
		<p style="text-align: center;">
			<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
		</p>
		<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
			<li>Worcester Bosch Accredited Installer</li>
		</ul>
	</div>
	<div style="display: inline-block; vertical-align: bottom; margin: 5px; text-align: center;">
		<p style="text-align: center;"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
		<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
			<li>7 Year Guarantee Available</li>
		</ul>
	</div>
	<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
		<p style="text-align: center;"><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
		<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
			<li>Which Best Buy 2013</li>
		</ul>
	</div>
</div>

All the "text-align: center" declarations are not required (as shown below) because it seems to affect all child elements, thus only 1 is required

<div style="text-align: center;">
	<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
		<p>
			<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
		</p>
		<ul style="list-style-image: url('/images/common/tick.png');">
			<li>Worcester Bosch Accredited Installer</li>
		</ul>
	</div>
	<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
		<p"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
		<ul style="list-style-image: url('/images/common/tick.png');">
			<li>7 Year Guarantee Available</li>
		</ul>
	</div>
	<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
		<p><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
		<ul style="list-style-image: url('/images/common/tick.png');">
			<li>Which Best Buy 2013</li>
		</ul>
	</div>
</div>

Text Under Image - Horizontal and Centered

<div style="text-align: center;">
	<div style="display: inline-block; vertical-align: bottom;">
		<div style="display: block;">
			<a href="http://www.gassaferegister.co.uk/" target="_blank" title="Gas Safe Registered Number: 562488"><img style="margin: 5px;" src="/images/modules/logos/gas-safe-white.gif" alt="" /></a>
		</div>
		<div style="display: block;">
			<a href="http://www.gassaferegister.co.uk/" target="_blank">Gas Safe No: 562488</a>
		</div>
	</div>
	<!-- These are just logos with no text underneath -->
	<a href="http://www.cityandguilds.com/" target="_blank"><img style="margin: 5px;" src="/images/modules/logos/cityandguilds-logo-qualifications.png" alt="" /></a>
	<a href="http://www.vaillant.co.uk/" target="_blank" title="Vaillant Accredited installer"><img style="margin: 5px;" src="/images/modules/logos/vaillant_logo.png" alt="" /></a>
	<a href="http://www.ideal-standard.co.uk/" target="_blank"> <img style="margin: 5px;" src="/images/modules/logos/ideal-standard.jpg" alt="" /></a>
</div>

The Basic Method

works but sometimes the styling gets wrong

<div>
	<div><img src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" /></div>
	<div>If you’re working full time hours we can call at lunchtime and treat your dog to over an hours'.</div>
</div>

Text Completely Below and Image ie cleared without floats

Put the image in its own paragraph, this adds a line break into it thus starting the text completely below the image.

<p><img src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" /></p>
<p>If you’re working full time hours we can call at lunchtime and treat your dog to over an hours'.</p>

or

<p>	
	<img src="http://designingmedia.com/tonic.jpg" alt="WordPress Theme"><br>
	This is some content
</p>

Horizontal List - with one image with a link centered underneath it.

<div style="text-align: center;">
	<div style="display: inline-block; vertical-align: bottom;">
		<div style="display: block;"><a href="http://www.gassaferegister.co.uk/registersearch/Engineers.aspx?businessid=127148&amp;centreid=112514&amp;returnurl=../FindBusiness.aspx&amp;returnname=Find%20a%20business&amp;reload=true" target="_blank" title="Gas Safe Registered Number: 562488"> <img style="margin: 5px;" src="/images/modules/logos/gas-safe-white.gif" alt="" /></a></div>
		<div style="display: block;"><a href="http://www.gassaferegister.co.uk/registersearch/Engineers.aspx?businessid=127148&amp;centreid=112514&amp;returnurl=../FindBusiness.aspx&amp;returnname=Find%20a%20business&amp;reload=true" target="_blank">Gas Safe No: 562488</a></div>
	</div>
	<a href="http://www.cityandguilds.com/" target="_blank"><img style="margin: 5px;" src="/images/modules/logos/cityandguilds-logo-qualifications.png" alt="" /></a>
	<a href="http://www.vaillant.co.uk/" target="_blank" title="Vaillant Accredited installer"> <img style="margin: 5px;" src="/images/modules/logos/vaillant_logo.png" alt="" /></a>
	<a href="http://www.ideal-standard.co.uk/" target="_blank"><img style="margin: 5px;" src="/images/modules/logos/ideal-standard.jpg" alt="" /></a>
</div>

Inline Horizontally List - margin auto 0

I have not testest this method but you can see the 'margin: 0 auto;' statement is a child on the main <div>. The 'margin: 0 auto;' works on the element it is set on. The other thing to note is that the dive with the 'margin: 0 auto;' statement needs to have a defined width. You can use px, width, Max-width etc.. as long as a width is set. The reason for this is you cann center an item with no width or if the width is 100%.

<div style="margin: 0 auto; width: 80%;">
	<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
		<p>
			<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
		</p>
		<ul style="list-style-image: url('/images/common/tick.png');">
			<li>Worcester Bosch Accredited Installer</li>
		</ul>
	</div>
	<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
		<p"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
		<ul style="list-style-image: url('/images/common/tick.png');">
			<li>7 Year Guarantee Available</li>
		</ul>
	</div>
	<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
		<p><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
		<ul style="list-style-image: url('/images/common/tick.png');">
			<li>Which Best Buy 2013</li>
		</ul>
	</div>
</div>

Float Left

This will stack the items either vertically (not level if images are different sizes) or horizontally while keeping the bottoms level (vertically aligned bottom) because floated images go up

<div style="float:left; vertical-align: bottom; margin: 5px;">
	<p style="text-align: center;">
		<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
	</p>
	<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
		<li>Worcester Bosch Accredited Installer</li>
	</ul>
</div>
<div style="float:left; vertical-align: bottom; margin: 5px;">
	<p style="text-align: center;"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
	<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
		<li>7 Year Guarantee Available</li>
	</ul>
</div>
<div style="float:left; vertical-align: bottom; margin: 5px;">
	<p style="text-align: center;"><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
	<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
		<li>Which Best Buy 2013</li>
	</ul>
</div>

Vertical

margin 0 auto - vertically stacked and centered

If you dont want to use <li> method, you can replace this with a <div> or <p>

<div style="margin: 0 auto; padding: 5px;">
	<p style="text-align: center;">
		<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
	</p>
	<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
		<li>Worcester Bosch Accredited Installer</li>
	</ul>
</div>
<div style="margin: 0 auto; padding: 5px;">
	<p style="text-align: center;"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
	<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
		<li>7 Year Guarantee Available</li>
	</ul>
</div>
<div style="margin: 0 auto; padding: 5px;">
	<p style="text-align: center;"><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
	<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
		<li>Which Best Buy 2013</li>
	</ul>
</div>

Text Under Image - Vertically Stacked

<div style="float: left; width: 150px; margin-right: 40px;">
	<div>
		<div style="display: inline-block;"><a href="http://www.hormann.co.uk" target="_blank"><img src="/../images/hormann.gif" alt="image 1" /></a></div>
		<h5 style="text-align: center;">Hormann</h5>
	</div>
	<div>
		<div style="display: inline-block;"><a href="http://www.gliderol.co.uk/" target="_blank"><img src="/../images/gliderol.gif" alt="image 2" /></a></div>
		<h5 style="text-align: center;">Gliderol</h5>
	</div>
	<div>
		<div style="display: inline-block;"><a href="http://www.domesticrollershutters.co.uk/" target="_blank"><img src="/../images/domestic-rollers-logo.jpg" alt="image 2" /></a></div>
		<h5 style="text-align: center;">Domestic Rollers</h5>
	</div>
</div>

Side

Images with title on the right side vertically centered

<div>
	<div style="display: inline-block;"><img src="/images/modules/logo-block/logo-200px-high.png" alt="" /></div>
	
	<!-- Method 1 -->
	<div style="display: inline-block; height: 20px; margin: auto auto;">Method 1</div>
	
	<!-- Method 2 -->
	<div style="display: inline-block; height: 100%;">
		<p style="display: block; margin: auto auto;">Method 2</p>
	</div>
	
</div>

Method 1 - relies on a defined height
Method 2 - height is dynamically created by the font

Published in Styled Elements

Sunday, 30 November 2014 00:00

Responsive Information Blocks Lists with no text wrapping

The following examples and layouts use the 'overflow:hidden' feature to prevent text wrapping and to allow nice and neat listings whilst keeping them responsive. The examples all comprise of 2 columns. You can either choose to have trhe image on the right or left without issue.

Consider putting the clear both in the <h2> title rather thatn a seperate <div style="clear: both;"> </div> - This makes it neater and one less line. Not having the <div> at the end also prevents the text getting cycled in <div>'s rather than <p>'s.

Single Paragraph Method

Minimum Code Required for overflow to work

HTML

<div style="overflow: hidden;">
	<img style="margin: 10px; float: right;" src="/images/pages/dog-sitting/arnside.jpg" alt="arnside" />
	<p style="overflow: hidden; min-width: 180px;">Your dog can stay with us at my home. They will be treated just like a member of our family with</p>
</div>

Single Paragaph - <br /> Clear Method

Item/Article list (ie rooms) image on the left, minimum width for the item to prevent content/text block wrapping and splitting lines (responsive)

HTML

<div style="overflow: hidden;">
	<img style="margin: 10px; float: left;" src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" />
	<p style="overflow: hidden; min-width: 180px;">
		If you’re working full time hours we can call at lunchtime and treat your dog to over an hours’ worth of exercise and companionship to break up the day. If the mornings are hectic or your dog is young and just can’t wait then maybe our morning walk is for you. I walk in the afternoon too giving you real flexibility if you work shifts or have a busy afterschool schedule. Walkies works Mon to Fri but book only the days you need. Five days a week or five days a year, once you have registered I’m happy to take your dog even when it’s a last minute emergency. Weekends are by arrangement.<br style="clear: both;" />&nbsp;
	</p>
</div>

Single Paragaph - <div> Clear Method

Item/Article list (ie rooms) image on the left, minimum width for the item to prevent content/text block wrapping and splitting lines (responsive)

HTML

<div style="overflow: hidden;">
	<img style="margin: 10px; float: left;" src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" />
	<p style="overflow: hidden; min-width: 180px;">
		If you’re working full time hours we can call at lunchtime and treat your dog to over an hours’ worth of exercise and companionship to break up the day. If the mornings are hectic or your dog is young and just can’t wait then maybe our morning walk is for you. I walk in the afternoon too giving you real flexibility if you work shifts or have a busy afterschool schedule. Walkies works Mon to Fri but book only the days you need. Five days a week or five days a year, once you have registered I’m happy to take your dog even when it’s a last minute emergency. Weekends are by arrangement.
	</p>
</div>
<div style="clear: both;">&nbsp;</div>

NB: <p style="overflow: hidden; min-width: 180px;"> can be replaced with <div style="overflow: hidden; min-width: 180px;">. This has the benefits of extra spacing that comes with <p> not being applied. However if you use <div>, text will also need to be encapsulated in a <p>. See the following methods.

More Complex DIV Methods

Single <div> Method

This only allows for images or single items to be floated to the side
In the 'text/content' <div> you can put anything you want

HTML

<div style="overflow: hidden;">

	<img alt="" src="/images/dog-picture.jpg" style="float:left; margin: 10px;"/>
	
	<div style="overflow: hidden; min-width: 180px;">
		<h2>This is a Title</h2>
		<p>This is a paragraph of Text</p>
		<ul class="list-number-digit digit-brown">
			<li>We are located in the heart of historic Branston on the main Lincoln Road.</li>
			<li>Just 10 minutes South East of Lincoln.</li>
			<li>We have a large selection of quality Guest Beers, Largers, Bitters, Spirits, Soft drinks and Snacks.</li>
			<li>We also have a long history of serving the community through a number of local and National Charities.</li>
			<li>If you have any questions please don't hesitate to call us.</li>
		</ul>
		<p>Another Paragraph of text (optional)</p>
	</div>

</div>

Double <div> Method

<li> and content with imageshow on the right, text area has mimimum width to prevent text wrapping (responsive)

With this you can change the side on which the image floats
It is also possible to put more in the floated <div> than an image, anything you want.
In the 'text/content' <div> you can put anything you want
this is the best method, the most flexible.

NB: in this example i set imageshow to 419px width X 336px height, Theme Slider

HTML

<div style="overflow: hidden;">

	<div style="float: right; margin: 10px;">{imageshow sl=1 sc=1 /}</div>
	
	<div style="overflow: hidden; min-width: 180px;">
		<h2>This is a Title</h2>
		<p>This is a paragraph of Text</p>
		<ul class="list-number-digit digit-brown">
			<li>We are located in the heart of historic Branston on the main Lincoln Road.</li>
			<li>Just 10 minutes South East of Lincoln.</li>
			<li>We have a large selection of quality Guest Beers, Largers, Bitters, Spirits, Soft drinks and Snacks.</li>
			<li>We also have a long history of serving the community through a number of local and National Charities.</li>
			<li>If you have any questions please don't hesitate to call us.</li>
		</ul>
		<p>Another Paragraph of text (optional)</p>
	</div>

</div>

Unsorted Examples

Item/Article list (ie rooms) image on the left

Minimum width for the item to prevent title wrapping and splitting lines (responsive)

http://www.inchrye.co.uk/rooms

HTML

<p>Our Rooms at Inchrye Bed and Breakfast are all well maintained but retain a homely feel so you can enjoy your stay in Inverness like it was your own back garden. We have a wide variety of room sizes to suite all family sizes.</p>
<p><img alt="Suite Room with Double Bed and own Sitting Room" class="frame-2" src="/images/rooms/suite-room.jpg" style="float: left; margin-left: 15px; margin-right: 15px;" title="Suite Room with Double Bed and own Sitting Room" /></p>
<p style="float: left; min-width: 180px;"><strong>Suite Room with Double Bed and own Sitting Room</strong></p>
<div style="clear: both;">&nbsp;</div>

2 columns thing - easier version (responsive)

http://www.scomadi.co.uk

HTML - Easy Version

<p><img style="float: left;" src="/images/pages/home/white-scomadi.jpg" alt="white-scomadi" width="327" height="260" /></p>
<div style="float: left;">
	<p>Turismo Leggera</p>
	<p>
		The Turismo Leggera range represents the<br />culmination of 10 years of prototype development.<br />Utilising the experience of Scooter Innovation &amp; PM<br />Tuning Racing Products, Scomadi are aimed at<br />providing a new era in scootering for followers of<br />iconic Italian design.<br />With styling cues taken from the Grand Prix model<br />the goal was to create a "Modern Classic".<br />A machine that allows the true enthusiast to retain<br />classic styling without sacrificing reliability or<br />modern day functionality. The Turismo Leggera 250<br />was initially released as a carbon fibre,10 machine<br />limited edition hand built in the UK.<br />Demand for further machines evolved into another<br />30 handmade 300cc machines with the latest mass<br />production series of Scomadis presented today.<br />The Turismo Leggera range will present a dynamic<br />package for the discerning scooterist available<br />firstly as air cooled 50cc and 125cc engine options<br />with a flagship model 300cc due for mid 2014.<br />The Scomadi TL300 will be equipped with the Piaggio<br />“class leader”: QUASAR- 300, 4 valve, liquid cooled,<br />engine. One of the lightest, most compact, and<br />powerful 300cc motors on the market. Powered by<br />22HP at 7,500 rpm. The TL300 ensures top<br />performance in terms of speed and acceleration with<br />reliability.
	</p>
</div>

HTML - Image on alternating side, float left then float right

http://www.sidescansystems.com/brite-side-scan-system

<p>
	The system consists of 4 Ultrasonic sensors mounted down the left side fo the vehicle and a warning display mounted in the cab. When the left hand indicator is on the unit will sense the presence of a cyclist, pedestrian or vehicle and give its posistion and range up to 1.5 mtrs. At the same time, a spoken voice warning is played saying &quot;This vehicle is turning left&quot; to warn anyone on the nearside.
</p>
<p>&nbsp;</p>
<p style="text-align: right;"><img alt="Side Scan Kit" class="frame-2" src="/images/side-scan-kit.jpg" style="float: right;" title="Side Scan Kit" /></p>
<p style="margin-left: 80px;"><strong>Features</strong></p>
<ul class="tick" style="margin-left: 80px;">
	<li>4 x Ultrasonic Sensor with 1.5 mtr range</li>
	<li>In cab warning unit which displays range and position</li>
	<li>98db Voice Sounder - &quot;This vehicle is turning left&quot;</li>
	<li>IP68 Waterproof rated</li>
	<li>12v-24v operation</li>
	<li>Can be fitted to almost any vehicle</li>
	<li>Low speed sensing - shuts off at higher speeds</li>
</ul>
<div style="clear: both;">&nbsp;</div>

<p>&nbsp;</p>
<p><img alt="Choice of Sensors" class="frame-2" src="/images/choice-of-sensors.jpg" style="float: left; margin-left: 15px; margin-right: 15px;" title="Choice of Sensors" /></p>
<p>
	<strong>Choice of sensors - Underslung or Flush Mount</strong><br />
	(Depending on application)
</p>
<div style="clear: both;">&nbsp;</div>

Overflow Notes

These are some notes that i used when creating these code samples.

for the overflow with image trick to work. the image must not be in the same container as the text, ie the <p>, this must be seperate otherwise you are just enabling overflowing for both of them putting you back to square 1.
the image and paragraph need to be grouped together in their own container. ie a <div>
the div needs the overflowing enabled because the div will expand with the text not wrapping
the <p> containing the text will need overflowing enabled because it too will expand due to the text not wrapping.
also to stop full on text squashing you should use min-width: 180px;
correction, only the containing <p>/<div> will need the overflow. but they still need to be grouped together so the browser knows what to overflow
correction, the overflow: hidden on the primary containing div (ie hold the img and the <p>), its purpose is to allow the whole conatiner to resize. if you just have the text overflow command the text does not wrapp around the image but dissaperas off the side of the browser
min-width: is the best width for showing text on an iPhone. i worked this out by experimenting
overflow seems to of been the key - see css - How to make an inline-block element fill the remainder of the line? - Stack Overflow (the example code - http://jsfiddle.net/qx32C/36/)
The magic of “overflow: hidden” — Articles — Colin Aarts, freelance web developer
both overflows are inportant, the widths etc can be changed

Published in Styled Elements

Sunday, 30 November 2014 00:00

Vertical and Horizontal lists

Vertical Lists:

Vertical list with alternative bullet

You can use any image for a list bullet as shown below but they must be small enought to fit otherwise the text will become out of alignment with the icon. If you want to use larger images you need to use a different method.

Single room with bed and breakfast £30 per person
Double Room with bed and breakfast £35 per person
(All Prices shown above are per night)
(All rooms are en Suite)

HTML

<ul style="margin-left: 40px; list-style-image: url('/images/kb/2014/498/lists-with-large-custom-icons-that-are-vertically-aligned/tick.png');">
	<li>Single room with bed and breakfast &pound;30 per person</li>
	<li>Double Room with bed and breakfast &pound;35 per person</li>
	<li>(All Prices shown above are per night)</li>
	<li>(All rooms are en Suite)</li>
</ul>

Vertical list with Icons

Disable bullet points and then use backgrounds and padding on the <li> to get same effect, however this is then not using bullet images and could possible cause cropping.
Use position: relative and then move the text with a top: -10px etc.. This works and still uses bullet points

position: relative method

This method sets a separate icon for each <li> item although you can set a global icon in the <ul>. When you do this the text in the <li> is moved out of horizontal alignment with the icon so it looks messey. To fix this I have surrounded the 'text'/'the whole on the <li> contents' and then I have used a position: relative and top: -10px statement to move the text back into the center of the icons. You now have a nice looking list with large custom icons. The position: relative in the <ul> is important for this to work. You can also put all of the styling into a CSS file if you want.

Wi-Fi
Tea and Coffee
TV
Fresh Towels
Our stay includes a traditional English breakfast.
We also have a variation of cereals and fruits available.

HTML

<ul style="margin-left: 40px; position: relative;">
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/wi_fi_32.png');"><span style="position: relative; top: -10px;">Wi-Fi</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/coffee_maker_32.png');"><span style="position: relative; top: -10px;">Tea and Coffee</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/television_32.png');"><span style="position: relative; top: -10px;">TV</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/towel_32.png');"><span style="position: relative; top: -10px;">Fresh Towels</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/bulls-eye-eggs-with-toast-and-bacon_32.png');"><span style="position: relative; top: -10px;">Our stay includes a traditional English breakfast.</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/corn_flakes_32.png');"><span style="position: relative; top: -10px;">We also have a variation of cereals and fruits available.</span></li>
</ul>

Horizontal Lists:

Joomlashine Version

grid layout works by splitting the width up by % but on 'mobile' devices, grids fallback to 1 vertical column. Thi sis not ideal in all situations but is an option.

HTML

<div class="grid-layout">
	<div>Text in column 1</div>
	<div>Text in column 2</div>
</div>

Centered Horizontal Ordered or UnOrdered List with no bullet points

This is method is really useful for making horizontal menus. You can make all of the items appear on the same line if you make the <ul> wider. I have not tried playing with min-width and max-width but they should work.

Electrician in Kent
Electrician in Canterbury
Electrician in Dover
Electrician in Ashford

HTML

<ul>
    <li>Electrician in Kent</li>
    <li>Electrician in Canterbury</li>
    <li>Electrician in Dover</li>
    <li>Electrician in Ashford</li>
</ul>

CSS

ul {
	list-style: none;
	margin: 0 auto;
	width: 400px;
	padding: 0;
}

li {
	float: left;
}

DIV Inline List (Joomla Footer Keyword List )

Solar Thermal Panels in Lincolnshire
Ground Heat Source Pumps in Lincolnshire
Wind Turbine Installations in Lincolnshire
Renewable Energy Services in Lincolnshire
Solar Photovoltaic Panels in Lincolnshire
All Ways Green Ltd

HTML

<ul style="list-style: none;">
	<li style="display: inline;">Solar Thermal Panels in Lincolnshire</li>
	<li style="display: inline;">Ground Heat Source Pumps in Lincolnshire</li>
	<li style="display: inline;">Wind Turbine Installations in Lincolnshire</li>
	<li style="display: inline;">Renewable Energy Services in Lincolnshire</li>
	<li style="display: inline;">Solar Photovoltaic Panels in Lincolnshire</li>
	<li style="display: inline;">All Ways Green Ltd</li>
</ul>

or

this make a nice horizontal list with no styling.
not sure what the outside does and not 100% tested

Electrician in Kent
Electrician in Canterbury
Electrician in Dover
Electrician in Ashford

CSS

.centered-list li {
	float: left;
	list-style: none outside none;
	padding: 5px;
}

HTML

<ul class="centered-list">
	<li>Electrician in Kent</li>
	<li>Electrician in Canterbury</li>
	<li>Electrician in Dover</li>
	<li>Electrician in Ashford</li>
</ul>
<div style="clear: both;">&nbsp;</div>

you can also use the line below instead of inline CSS

<li style="float: left; list-style: none outside none; padding: 5px;"></li>

DIV Horizontal List

This is a basic horizontal list using <div>

HTML

<div style="text-align: center; valign: top; background-color: white;">

	<div style="width: 150px; display: inline-block;">
		<a title="City and Guilds NPTC" href="http://www.nptc.org.uk/" target="_blank">
			<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" alt="City and Guilds NPTC" />
		</a>
	</div>	
	
	<div style="width: 150px; display: inline-block;">
		<a title="International Society of Arboriculture" href="http://www.isa-arbor.com/" target="_blank">
			<img src="/images/modules/498/medium-icons/international-society-of-arboriculture.jpg" alt="International Society of Arboriculture" />
		</a>
	</div>
	
	<div style="width: 150px; display: inline-block;">
		<a title="Constuction Line" href="http://www.constructionline.co.uk/" target="_blank">
			<img src="/images/modules/498/medium-icons/constuction-line.png" alt="Constuction Line" />
		</a>
	</div>
	
	<div style="width: 150px; display: inline-block;">
		<a title="Acclaim Accreditation" href="http://www.constructionline.co.uk/static/acclaim/" target="_blank">
			<img src="/images/modules/498/medium-icons/acclaim-accreditation.png" alt="Acclaim Accreditation" />
		</a>
	</div>
	
</div>

Horizontal List - position:relative method

Electrician in Kent
Electrician in Canterbury
Electrician in Dover
Electrician in Ashford

CSS

<style type="text/css">
	.qw-list {	
		overflow: hidden;
	}
	.qw-list ul {
		list-style: none;
		position: relative;
		float: left;
		display: block;
		left: 50%;
	}
	.qw-list ul li {
		position: relative;
		float: left;
		display: block;
		right: 50%;
	}
</style>

HTML

<div class="qw-list">
	<ul>
		<li>Electrician in Kent</li>
		<li>Electrician in Canterbury</li>
		<li>Electrician in Dover</li>
		<li>Electrician in Ashford</li>
	</ul>
</div>

Horizontal List / Menu (Simple)

Electrician in Kent
Electrician in Canterbury
Electrician in Dover
Electrician in Ashford

CSS

<style type="text/css">
	ul.qw-divmenu {
		width: 75%;
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}
	ul.qw-divmenu li {
		display: inline-block;
	}
</style>

HTML

<ul class="qw-divmenu">
	<li>Electrician in Kent</li>
	<li>Electrician in Canterbury</li>
	<li>Electrician in Dover</li>
	<li>Electrician in Ashford</li>
</ul>

Ordered and Un-Ordered List Method <li>

I came across this method at WebFusion where they took a clever method for making list with images by using ordered and unoredered lists and replacing the bullet point wiht an image.

So this method will requires some html code and some CSS code. The CSS code could be inline if you needed.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

CSS

ul.icon_list {
	list-style: none;
}

.icon_list li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 18px;
	margin-left: 0px;
}

.medium .customised {
	/*background-position: 0px -4695px;*/
}

.medium .flexible {
	/*background-position: 0px -4895px;*/
}

.icon_list.medium li {
	padding-left: 60px;
	background-color: transparent;
	background-image: url("images/modules/498/small-icons/television_32.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	/*background-position: 0px 5px;*/
	background-clip: border-box;
	background-origin: padding-box;
	background-size: auto auto;
}

This CSS code utilises image sprites but can easily be adapted to use normal images

HTML

<ul class="icon_list medium green">
	<li class="customised">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
	</li>
	<li class="flexible">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
	</li>
</ul>

Using Icons as bullet points

Address: 198 Example street, Suite 7s new York, NY 10013
Phone: 112 345 6798
Email: example@email.com

CSS

.fu-list li {
	clear: both;
	margin: 15px 0 0;	
	padding-bottom: 0;
	list-style-type: none;
	list-style-position: outside;
}

.fu-list .fu-icon-wrapper {
	width: 20px;
	height: auto;
	line-height: 24px;	
	margin: 1px 10px 0 0;	
	z-index: 9;
	text-align: center; /* evens all the icons up */
	float: left;
}

.fu-list .fu-icon-wrapper i[class*="fa"] {
	font-size: 18px;
	display: block !important;
	color: #000;
}

.fu-list .fu-content {
	overflow: hidden; /* this prevents the text flowing under the icon */
}

.fu-list .fu-content p {
	padding: 0;
	margin: 0;
}

HTML

<ul class="fu-list">			
	<li>		
		<div class="fu-icon-wrapper"><i class="fa fa-map-marker"></i></div>			
		<div class="fu-content"><p>Address: 198 Example street, Suite 7s new York, NY 10013</p></div>			
	</li>				
	<li>		
		<div class="fu-icon-wrapper"><i class="fa fa-mobile"></i></div>			
		<div class="fu-content"><p>Phone: 112 345 6798</p></div>			
	</li>				
	<li>		
		<div class="fu-icon-wrapper"><i class="fa fa-envelope"></i></div>			
		<div class="fu-content"><p>Email:&nbsp;<a href="mailto:example@email.com">example@email.com</a></p></div>			
	</li>				
</ul>

<div style="clear: both;">&nbsp;</div>

Notes

This requires that you have FontAwesome installed
This also employs a different method for making a list

Product List with Manual Icons

This is a really nice solution to having icons in a list.

CSS

.product-list {
	font-family: wf_segoe-ui_normal, 'Segoe UI', Segoe, 'Segoe WP', Tahoma, Verdana, Arial, sans-serif;
	font-size: 100%;
}

.product-list ul {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.product-list li {
	margin: 0;
	padding: 0;
	line-height: 1.25;
	display: block;
	margin: 0 0 0.75em;
	font-size: 1em;	
}

.product-list li.heading {
	font-size: 1em;
	font-weight: normal;
	margin-bottom: 0.65em;
}

.product-list .product-link {
}

.product-list li a {
	color: #1A1A1A;
	font-size: 0.9em;    
	font-size: 1em;
	cursor: pointer;
	text-decoration: none;
	height: 10px;
	vertical-align: top;
}

.product-list li img {
	display: inline-block;
	height: 26px;
	width: 26px;
	margin-bottom: -0.45em;
	margin-right: 10px;
	max-width: 100%;
	border: none;
}

.product-list li img.product-left {
   float: left;
}

@screen and (min-width: 540px;) {
	.product-list ul:first-child {
		margin-top: 0em;
	}
}

HTML

<div class="product-list">
	<ul>
		<li class="heading">Product List Title</li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 1<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 2<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 3<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 4<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 5<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
	</ul>
</div>

Published in Styled Elements

Sunday, 30 November 2014 00:00

Increase PHP and phpMyAdmin Execution Time

Just like PHP (ie php.ini), phpMyAdmin also has its own execution time limit. Why? I dont know.

You are most likely to see an error like the one below:

Fatal error: Maximum execution time of 60 seconds exceeded in C:\xampp\phpmyadmin\libraries\dbi\mysql.dbi.lib.php on line 140

To increase the phpMyAmin execution time, you need to edit the file

Add this line to xampp\phpmyadmin\config.inc.php

$cfg['ExecTimeLimit']=6000;

You might also want to change the settings below in the normal php.ini file if you still are getting timeout errors.

And Change xampp\php\php.ini to

post_max_size =750M 
upload_max_filesize =750M   
max_execution_time =5000
max_input_time =5000
memory_limit =1000M

And change xampp\mysql\bin\my.ini

max_allowed_packet =200M

Published in PHP

Sunday, 30 November 2014 00:00

CSS Processing Priority and Direction Rules

I always believed that css when parsed was processed from the top down with no exceptions. Although it does read from top to bottom and process in that direction there is a prior level to that.
It appears that the css is parsed in element levels first. it scans each element level and then goes down the page for each level ie. each deeper level has the ability to overide its parent. see examples below:

Example 1

#contact #center_column p {margin:0; padding:0 0 10px 0;}
#contact fieldset p {padding-left: 60px;} /* correct drop down placement */

Even thought the padding-left is after, the first line take presidence because it is further down the element chain. so line 1 will apply.

Example 2

#contact #center_column p {margin:0; padding:0 0 10px 0;}
#contact #center_column fieldset p {padding-left: 60px;} /* correct drop down placement */

In this example line 2 will be applied because the are at the same element level, but then line 2 is after line 1 so is applied as you normally expect css to work.

Published in CSS

Sunday, 30 November 2014 00:00

Nice PayPal Button Examples and Syntax

Full Syntax

{nicepaypal:button type|amount|item name|item number|shipping|shipping2|tax|item quantity|weight|option1|option2}

Real World Examples

{nicepaypal:cart|79.99|Custom Teeth Whitening Trays|||||field;Enter Quantity;1;3||}

<p>{nicepaypal:cart|79.99|Custom Teeth Whitening Trays|||||field;<strong>Enter Quantity</strong>;1;}</p>

Published in PayPal

Friday, 28 November 2014 00:00

My Joomla Security Notes

Fingerprinting

To prevent version of Joomla being identified. A way to check if you're running a Joomla site and what version by what files and directories are present. Also will prevent Blind Elephant working. One of the easiest ways for an attacker to decide if your site is a potential Joomla! target is to perform a rudimentary visual fingerprinting.

Template Issues, Deny these links via htaccess

http://www.joomla.org/?tp=1 (Reveals Template Positions/Triggers the modules debugging mode)
http://extensions.joomla.org/?template= (This will change your site's template a template name after the =)
http://www.joomla.org/?tmpl=offline (Triggers the display of a system sub-template)

Delete These

* You should also remove (if not needed) the default joomla images. Presence of Certain default files and folders can ID the Joomla Version. Delete the following:

Directories:

../images/stories/food
../images/stories/fruit

Files:

articles.jpg, clock.jpg, ext_com.png, ext_lang.png, ext_mod.png, ext_plugin.png, joomla-dev_cycle.png,

key.jpg, pastarchives.jpg, powered_by.png, taking_notes.jpg, web_links.jpg
* deny access to xml and language.ini files (via htaccess in ## This also blocks fingerprinting attacks browsing for XML and INI file (or <Files ~ "\.xml$">))

Other Fingerprinting

Disable PHP easter eggs (Visual Fingerprinting)(via htaccess)

Other Security

disable anonymous ftp in your cPanel
your site should have only a handful of entry points, namely the index.php and index2.php files inside your site's root and the administrator and xmlrpc subdirectories.
(via htaccess / Joomla Backend Protection Section, this restricts Joomlas administrator, components, modules and plugins folders)
SQLi protection / prevent SQLi Attacks (via htaccess)
SQLi protection / prevent SQLi Attacks (via joomla extensions), JHackgurad from siteground, possibly sh404SEF
remove or replace - x-powered-by header, usually says something like PHP version X-Powered-By: PHP/5.3.2 , use clean Response plugin, possibly use htaccess
remove meta tag generator joomla, sh404SEF does this, if not available use ByeBye Generator
Turn off and uninstall what you don't use. There's a security benefit to this practice also since unused code can still be the source of a vulnerability that gets you cracked.
disallow images in robots.txt
it is suggested super admin user should be in the 1-61 range when you change it
remove the X-Powered-By header, edit the php.ini, find expose_php=Off and change to expose_php=on
joomla when using gzip apparently adds a X-Powered-By Header, remove with plugin
remove joomla id in responses when gzip is used (clean response)
turn php errors off in php.ini
make sure jos_ or jos151_ prefix are not used (see note below for instructions to change)
Upload and configure custom .htaccess file
use strong passwords (ie cPanel)
htaccess password for all non joomla directories (via htaccess)
stop hotlink (cpanel or htaccess)
remove unused XML-RPC Server (if not needed)
admin to SSL (only if cert is installed)
enable SSL
Remove (if not needed) the standard images from the images folder. The stories/fruit and stories/food are another way to check if you're running a Joomla site
Turn Joomla Error Reporting off, Global Configuration page (see notes)
Turn PHP Error Reporting off (if not needed)
Remove the XML-RPC server if you don't need it.
remove joomla generator (might be done sh404sef)
add reCaptcha boxes where needed ie user registration
Restrict Access to the Administrator Section
hidden URL for administrator access via jsecure
username and password for admin directory via htaccess
Consider proper ACL for backend when there are multiple administrators etc.. dont have everyone as Super Admins
restrict access to the installer - when using mulitple admins
make sure host has suPHP running and that all file permission are directories have 0755 permissions and all regular files 0644 permissions
Error Reporting to None

Prevents any minor glitch to reveal sensitive server configuration information to a potential hacker). If this doesn't work, disabling PHP's error output to the browser in the php.ini. Leaving Error Reporting set to anything else except NONE will slow down your website and give hackers a security hole that they can use to peer into your server settings and PHP environment. Turn it off (NONE) unless you are debugging at the moment. Only use Error Reporting while testing or debugging. Otherwise keep it turned off.
robots.txt is a security nightmare.

- create deny lists for certain folders. better than identifying them in robots.txt
- Think twice about what you put in your robots.txt, since this is a common source for attackers to find interesting URLs
- ideally - make everything dissallowed and then add exceptions. this will not show what folders are there
if suhosin patch is installed this can cause unxplained issues where stuff will not run. it cannot be disabled by users but can be put in simulation mode (same thing)

find extension="suhosin.so" and add the following line below to give
extension="suhosin.so"
suhosin.simulation="On"

Published in Joomla

Friday, 28 November 2014 00:00

URL Anatomy with PHP Server Environment Variables

This useful article shows you what parts of a URL you can build with .htaccess server environmental variables.

URL Anatomy

Below I have named the various parts of a URL and given the corresponding global PHP variable. This is not an exahstive list as you can get usrrname passwords from a URL

https://user123:password1@video.quantumwarp.com:8080/subfolder/subfolder2/index.php?turnip=51&alien=54#myniceheading
1       2      3          4     5              6    7                              8                  9             10

## PHP Variables ##
$_SERVER['SERVER_PROTOCOL'] 1-2   (:// is not included)
$_SERVER['HTTPS'];                (This is a Boolean)
$_SERVER['PHP_AUTH_USER']   2-3
$_SERVER['PHP_AUTH_PW']     3-4   (: and @ are not included)
$_SERVER['SCRIPT_NAME'];    4-8
$_SERVER['PHP_SELF'];       4-8
$_SERVER['HTTP_HOST'];      4-6
$_SERVER['SERVER_NAME'];    4-6
$_SERVER['SERVER_PORT'];    6-7   (: is not included)
$_SERVER['REQUEST_URI'];    7-10  (fragment might not be included)
$_SERVER['QUERY_STRING'];   8-9   (? is not included)

## Part Names ##
Protocol                    1-2
Username                    2-3
Password                    3-4
Sub Domain                  4-5
Domain                      5-6
Port                        6-7
Path                        7-8
Query                       8-9
Fragment                    9-10   (some might refer to this as an Anchor)

Links

URL Layout
- Anatomy of a URL | doepud.co.uk (Wayback Machine) - very useful article on this subject.
- What are the parts of a URL? | Articles | web.dev - What's the difference between a host, site and origin? What is an eTLD+1? This article explains.
- URL - Wikipedia - A uniform resource locator (URL).
- URI fragment - Wikipedia - The fragment identifier introduced by a hash mark # is the optional last part of a URL for a document.
PHP
- PHP $_SERVER | W3Schools
  - $_SERVER is a PHP super global variable which holds information about headers, paths, and script locations.
  - This has an online demo where you can see the output of these variables.
- $_SERVER - PHP Manual - Server and execution environment information
- parse_url - PHP Manual
  - Parse a URL and return its components
  - This will get the fragment from the URL.
- How to get the current full url (url + fragments) of the webpage in PHP? - Stack Overflow
  - You will not be able to get the fragment portion of the URI back as it is used on the client only. If you need this you will manually have to send them to a server with some JavaScript.

Published in htaccess

Friday, 28 November 2014 00:00

Change the Joomla database prefix

To change the database prefix to prevent SQL Injection Attack (if not done during install)

Backup your database and site first.

Method 1 - PHPMyAdmin (inbuilt)

Newer version of PHPMyAdmin have a table prefix changer inbuilt and is now the prefered method.

Open up your Joomla database in PHPMyAdmin
Check All tables. If you can see them all exand the number of tables you can see on the page.
At the bottom, With Selected: , choose Replace table prefix
It will now ask you for the From prefix which is your current one jos_ , you should fill this in the box. You can also usually see the database prefix in the column on the left. The To prefix should be a random 5 characters using upper case, lower case and numbers (ie TrFgH_).
Click submit
Done

Method 2 - Old Text File method

Taken from here

Make a note of you database prefix either from joomla itself or the configuration.php file. For this example we will assume jos_
Go to PHPMyAdmin and export your database as a SQL file
Open database SQL file in a text editor (Notepad++).
- Search and replace (Ctrl+h in Notepad++) jos_ with your new database prefix, it should be a random 5 characters using upper case, lower case and numbers (ie TrFgH_).
- Save the file
Go in phpMyAdmin
- select your Joomla database and empty it of tables and data (i.e. Truncate)
- import the new SQL database file from above in to your Joomla database
Via ftp edit your configuration.php to refelct the new table prefix. No other details will need to be changed.
Done

Published in Joomla

Items filtered by date: December 2015

Floating

Types of Clearing

Horizontal

Vertical

Side

Single Paragraph Method

Minimum Code Required for overflow to work

Single Paragaph - <br /> Clear Method

Single Paragaph - <div> Clear Method

More Complex DIV Methods

Single <div> Method

Double <div> Method

Unsorted Examples

Item/Article list (ie rooms) image on the left

2 columns thing - easier version (responsive)

Overflow Notes

Vertical Lists:

Vertical list with alternative bullet

Vertical list with Icons

position: relative method

Horizontal Lists:

Joomlashine Version

Centered Horizontal Ordered or UnOrdered List with no bullet points

DIV Inline List (Joomla Footer Keyword List )

DIV Horizontal List

Horizontal List - position:relative method

Horizontal List / Menu (Simple)

Ordered and Un-Ordered List Method <li>

Using Icons as bullet points

Product List with Manual Icons

Fingerprinting

Delete These

Other Security

URL Anatomy

Links

Method 1 - PHPMyAdmin (inbuilt)

Method 2 - Old Text File method

Legal

Resources

QuantumWarp

Follow Us