Chrome - Revision history

PeterRobert at 06:27, 15 May 2021

2021-05-15T06:27:50Z

PeterRobert at 06:24, 15 May 2021

2021-05-15T06:24:11Z

PeterRobert at 04:56, 25 March 2021

2021-03-25T04:56:13Z

PeterRobert at 15:54, 20 October 2019

2019-10-20T15:54:35Z

PeterRobert at 08:56, 20 October 2019

2019-10-20T08:56:54Z

PeterRobert at 08:53, 20 October 2019

2019-10-20T08:53:15Z

PeterRobert at 08:34, 20 October 2019

2019-10-20T08:34:09Z

PeterRobert at 08:32, 20 October 2019

2019-10-20T08:32:48Z

PeterRobert at 11:58, 16 October 2019

2019-10-16T11:58:14Z

PeterRobert at 11:06, 15 October 2019

2019-10-15T11:06:11Z

@@ Line 100: / Line 100: @@
 *Use the element name with the correct prefix to define a css style in the '''user.css''' file that will override the styles in the core files of Phoenix.
-*For example, to change the background colour of the element the following would be saved in the '''user.css''' file - change '''newcolour''' for the new colour code - always include the '''!important''' which ensures the new style will override the core files:
+*For example, to change the background colour of the element the following would be saved in the '''user.css''' file - change '''newcolour''' for the new colour code - include the '''!important''' which ensures the new style will override the core files if it does not work without it:
   .breadcrumb {
      background-color: newcolour !important;

@@ Line 8: / Line 8: @@
 Use the software as an internet browser but it also has many useful tools for web development.
 ----
 All pages as displayed on the shop are comprised of many separate elements.
@@ Line 13: / Line 20: @@
 The styles of every element are defined in the code of Phoenix but they can all be redefined in one file named '''user.css''' - note the special file type '''.css''' - it is a '''Cascading Style Sheet'''.
-This file is found in the top folder/directory of Phoenix.
+This file is found in the top folder/directory of CE Phoenix prior to v1.0.7.8
 Open it with a file editor to see that it is empty for the user to enter their own style defines.
 Any styles defined in '''user.css''' will override the Phoenix styles.
 <hr>
 <big>'''Identify Elements'''</big>
 Try it out on the index (home) page of your website for example.
@@ Line 27: / Line 47: @@
 *'''Elements''' should be already be selected in the tool bar - click on it if it is not.
-*Click on Select Element icon in top left of tools pane - it will turn blue - or just '''Control+Shift+C''' on your keyboard.
+*Click on Inspect icon (box/arrow) in top left of tools pane - it will turn blue - or just '''Control+Shift+C''' on your keyboard.
 <div class="mainpage_box">
 [[File:chromeinspect4.png|link=]]
@@ Line 55: / Line 75: @@
 *The styles defined for the element will show in the bottom part of the tools pane.
-, in this case there is a list of styles defined:
+*In this case there is a list of styles defined:
   .breadcrumb {
@@ Line 72: / Line 92: @@
 Note that coding always uses U.S. spellings such as '''color''' and '''center'''.
 <hr>
 <big>'''Change Element Styles'''</big>
@@ Line 96: / Line 120: @@
 **RGB codes control the Red Green Blue values of a colour and are useful by adding a fourth A(lpha) element which controls transparency - a value of 1 is opaque, 0 is transparent.
 **HSL codes are rarely used and control the Hue Saturation Luminosity values of a colour.
 <hr>
 <big>'''Other Styles'''</big>
@@ Line 106: / Line 136: @@
   .element name {
      border: 1px solid blue !important; - this defines a border around the element 1px thick, solid and coloured blue.
-     border-radius: .25rem !important; - this defines rounded corners on the border - rem is a unit of font-size so if the font-size=16px, 1rem=16px.
+     border-radius: .25rem !important; - this defines rounded corners on the border - rem is a unit of font-size defined for the whole site so if the font-size=16px, 1rem=16px.
      padding: 1rem !important; - padding is the space between the text and the border.
      margin: 20px !important; - margin is a space outside the border.
@@ Line 113: / Line 143: @@
+  }
 </pre>

← Older revision		Revision as of 04:56, 25 March 2021
Line 1:		Line 1:
−	<~~span~~ class="btn-grey~~"><historylink type="~~back">&#~~129032;~~ Back</~~historylink~~><~~/span>~~	+	<div class="btn btn-grey btn-back">{{#fas:arrow-left}} Back</div> <div class="btn btn-grey btn-must-have">{{#fas:tools}} Must Have Tools</div>
−	~~<span~~ class="btn-grey~~" style="color:#0088dd;~~">~~'''&~~#~~x1F809; [[~~Must Have Tools~~]]'''~~</~~span~~>
	<hr>		<hr>

@@ Line 30: / Line 30: @@
 *Click on Select Element icon in top left of tools pane - it will turn blue - or just '''Control+Shift+C''' on your keyboard.
 <div class="mainpage_box">
-[[File:chromeinspect4.png]]
+[[File:chromeinspect4.png|link=]]
 </div>
@@ Line 37: / Line 37: @@
 <div class="mainpage_box">
-[[File:chromeinspect1.png]]
+[[File:chromeinspect1.png|link=]]
 </div>
 *For full details, click on the element and the element name will show highlighted blue in the top part of the tools pane.
 <div class="mainpage_box">
-[[File:chromeinspect2.png]]
+[[File:chromeinspect2.png|link=]]
 </div>
@@ Line 87: / Line 87: @@
 *Click the colour square and a colour picker and colour changer will popup.
 <div class="mainpage_box">
-[[File:chromeinspect3.png]]
+[[File:chromeinspect3.png|link=]]
 </div>
@@ Line 126: / Line 126: @@
 *Choose '''Galaxy S5''', for example, form the drop down menu in the top tool bar to see this:
 <div class="mainpage_box">
-[[File:chromemobile.png]]
+[[File:chromemobile.png|link=]]
 </div>
 *Choose other devices from the drop down menu to see how your website displays.

@@ Line 123: / Line 123: @@
 Chrome has a tool that emulates how your website displays on every device.
+*Click on the Device icon in top left of tools pane - it will turn blue - or just '''Control+Shift+M''' on your keyboard.
-Click on the Device icon in top left of tools pane - it will turn blue - or just '''Control+Shift+M''' on your keyboard to see this:
+*Choose '''Galaxy S5''', for example, form the drop down menu in the top tool bar to see this:
 <div class="mainpage_box">
 [[File:chromemobile.png]]
 </div>
+*Choose other devices from the drop down menu to see how your website displays.

@@ Line 113: / Line 113: @@
+  }
 </pre>
 <hr>
 {{Page In Progress}}
 {{Contribute}}

@@ Line 105: / Line 105: @@
 <pre>
   .element name {
-     border: 1px solid blue; '''- this defines a border around the element 1px thick, solid and coloured blue.'''
+     border: 1px solid blue !important; - this defines a border around the element 1px thick, solid and coloured blue.
-     border-radius: .25rem; '''- this defines rounded corners on the border - rem is a unit of font-size so if the font-size=16px, 1rem=16px.'''
+     border-radius: .25rem !important; - this defines rounded corners on the border - rem is a unit of font-size so if the font-size=16px, 1rem=16px.
-     padding: 1rem; '''- padding is the space between the text and the border.'''
+     padding: 1rem !important; - padding is the space between the text and the border.
-     margin: 20px; '''- margin is a space outside the border.'''
+     margin: 20px !important; - margin is a space outside the border.
-     font-size: 30px; '''- this defines the text size.'''
+     font-size: 30px !important; - this defines the text size.
-     color: blue; '''- this defines the text colour.'''
+     color: blue !important; - this defines the text colour.
+  }
 </pre>