Welcome
created: 27/04/2017 - By:Mostafa Ezzat - Contact Mea beautiful one page website template dedicated to promoting, selling, contacting and showcasing you. Red Umbrella was built for Photographers, Small businesses, Personal, web designer and developers, and in a few moments you can customize this template to suit your own needs. All files are super organized and highly documented, so working with these files is a breeze.
Installing Theme
- After unzip Theme Files, you will found workspace folder .
- You can view this Theme in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the Theme.
- Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
- Locate the domain folder you wish to upload your Theme files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .js into your FTP client.
- Once the files are done uploading, rename the file you want to be your home page as 'index.html'.
- Done.
Important Note :
To Edit Any File You Need To Open it With Any ' IDE Editor' I'm Recommended ' Sublime Text ' It's Free And Make The Editing Really Easy To Do.
After You Setup There Is Two Ways To Open The File You Want To Edit It
1- Drag And Drop The File Into The Editor.
2- In File Menu You Can Find It In Left Top The Editor Open It You Will Find Open Click It And Go To The Theme Folder And Choose The File You Want To Edit It.
3- Click Right On The File And Hover On ' Open With ' Sub-Menu And Click On ' Sublim Text ' Or The IDE You Choose
Header
Change Header Background
To Change Background Image First Open ' css/main.css ' Go To Line 43 And You Will Find This Code
.header {
width: 100vw;
height: 100vh;
background-image: url(../img/headerBG.jpeg);
background-size: cover;
background-position: center;
}
As You Can See In Highlight Line All You Want To Change Is 'headerBG.jpeg' To Your Image Name.Extension
Note: make sure the image in 'img' directory
Change Fake Name And Specialist
To Change The Fake Name To Your Name And Your Specialist First Open index.html File And Go To Line 31 You Should Find Those Two Line Of Code Look Like This.
hi i'm john doe
experienced web designer / web developer
Remove The ' john doe ' And Replace It With Your Name.
To Change You Specialist Remove Every Thing Between p Tag And Type Your Specialist.
Example :-
hi i'm You Name
Your Specialist
Change Sochial Media Links
To Change The Sochial Media Links First Open index.html File And Go To Line 34 You Will Find This.
Search For ' href="#" ' And Replace The ' # ' To Your Sochial Link .
Example :-
Note: Make Sure You Dont Remove Any Thing Else
Change Your Video Link
To Change Your Video Link First Go To 'index.html' File And Go To Line 58 You Will Find This.
Know More
All You Want To Do Is Replace 'href' Value To Your Video Link Its Only Accept Youtube Or Vimeo Links
Example:-
Know More
Navigation
Change Navigation Brand Image
To Change The Sochial Media Links First Open index.html File And Go To Line 60 You Will Find This.
Replace ' brand.png ' To Your Image Name.Extension
And Change 'Brand' To Your Brand Name
Example :-
Note :- Image Max Size = 200x50 And Make Shure It's In img Directory;
About
Change Personal Image
To Change Personal Image Open Index.html And Go To Line 101 You Will Find This
Make Sure You Add Personal Image To ' img ' Folder And Replace ' personal-photo.png ' To You Imagename.Extension And In ' alt ' Tag Replace The Value To Your Brand Or Your Name
Example :-
Change Fake Name And The Description
To Change The Fake Name To Your Name And Your Description First Open index.html File And Go To Line 104 You Should Find A Few Lines Like This.
Hi I’m John Doe
I'm John Doe. Creative Web Designer And Developer With More Than 5 Years Experience.I Design Your Website.
whereas multidisciplinary intellectual capital. Distinctively synergize market-driven master and prospective channels. Dramatically drive an expanded array of expertise with modern technology. Completely cultivate standardized manufactured. Continue transform process centric systems rather than compelling growth strategies. Energistically streamline low-risk high-yield supply chains via scalable intellectual capital.
As You Can See To Change The Fake Name Just Replace 'John Doe' To Your Name.
Now There IS Two 'p' Tag We Will Start With That One Have Class 'lead' This You Shoud Replace It With Your Power Points For Example.
Now With The Second 'p' Tag With Class 'about-full-desc' Replace It With Your Full Description.
Example :-
Hi I’m Your Name Here
Replaced With Your Power Point Or What Ever You Like.
Replace With You Full Description OR What Ever You Like.
Change Download CV Link
To Change Download CV Link Go To Index.html And Go To Line 113 You Will Find This.
Download CV
Replace 'href' Value To Your CV Link
Example:-
Download CV
Change Your Skills
To Change Your Skill First Go To index.html And Go To Like 122 You Will Find This.
HTML5
Now You Soud Replace HTML5 To Your Skill Title And
To Give It How Many Stars Go To 'div' Tag With Class 'five-star' And Replcae 'five-star' To 'one-star' or 'two-star' or 'three-star' or 'four-star' or leave it as 'five-star'
Example:-
Skill Title
To Add More Skills Just Take A Copy From The Code And Past It After It.
To Remove a Skill Just Remove The Whole Block Of Code
Change Education
To Change Your Educations First Go To index.html And Go To Like 152 You Will Find This.
Education Title 2008-2012
Education Place
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
To Change The Education Title Replace 'Education Title' To Your Education Title
To Change The Education Year Replace '2008-2012' To Your Education Year
To Change You Education Description Replace Every Thing Between 'p' Tag
To Change You Education School/collage Replace 'Education Place' To Yours
Example:-
Education Title 2070-2080
Your School/Collage Here
Full Description About Your Education
To Add More Education Just Take A Copy From The Code And Past It After It.
To Remove a Education Just Remove The Whole Block Of Code
Change Experience Section
To Change Experience First Go To index.html And Go To Like 200 And Follow The Education Part Its Just Same Thing ( Go To Education Part Here ) .
Portfolio
Change Portfolio Filters
To Change Portfolio Filters Open Index.html And Go To link 235 You Will Find This.
To Add More Filters Just Copy The 'li' Tag And Pest It Before '< /ul>' Tag And Change The Filter Name And Filter Selector ( In Filter Selector No Spaces Or Uppercases )
Example:-
As You Can See I Added New Filter And Remove The 'wordpress' filter You Can Add As Many As You Can But Remember The Filter Selector We Will Need It In Add/Change Portfolio Items Part
Add/Change Portfolio Items
To Add/Change Portfolio Items Open Index.html And Go To link 244 You Will Find This.
Here We Will Need The Filter Selector As You Can See In The 'div' Tag With Class 'portfolio-item' As You Can See Its Have Also 'web-design' Class This Class is The Selector You Need To Add It Because When The Visitor/Client When He Click On The Filter Button This Item shoud Only One's Display To Him
Now To Change The Item Image In Line 245 In 'src' Attribute You Shoud Replace 'web-design-1.jpg' To You Image 'name.extension' But Before That Make Shure The Image In 'img/portfolio' Directory After This There Is 'alt' Attribute Replace The Value Of It To This Project Description Now You Shoud Go To The 'a' Tag With Class 'lightbox' In Line 249 Replace 'web-design-1.jpg' in Attribute 'href' Value To Your Imagename.Extension.
Example:-
Note : To Add New Item Take This Code Copy And Pest It After Last Item In Portfolio Items And To Remove Item Just Remove The Whole Block Of Code.
Testimonoal
Change Client Image And What He/She Say
To Change Client Image Open Index.html And Go To Line 328 You Will Find This
john doe
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
To Change Client Image Go To Line 330 And Replace 'testimonoals-client-1.png' To Your 'image-name.extension' But First Make Shure The Image In 'img/testimonoal' Directory
To Change Client Name Go To line 333 And Replace 'john doe' To Your Client Name
To Change What Client Say Go To Line 334 And Replace Every This Between 'p' Tag To What Ever Your Client Say
Example:-
Client Name
What Us Your Client Say
Note: To Add New Client Just Copy This Block Of Code And Replcae Every Thing And Past It After Last Testimonoal Item And To Remove A Client Just Remove The Whole Block Of Code.
Contact
Change Contact Information
To Change Contact Information First Open Index.html And Go To Line 395 You Will Find This.
Phone
+88017 17414291
Email
info@domain.com
Address
zweb Company 12345 mirpur Street Dhaka, Bangladesh
To Replace The Phone Number Replace '+88017 17414291' To Your Phone Number.
To Replace The Email Replace 'info@domain.com' To Your Email
To Replace The Address Replace 'zweb Company 12345 mirpur Street Dhaka, Bangladesh' To Your Address
Example:-
Phone
+00000 00000000
Email
Your-email@domain.com
Address
Your Address Street
Thanks
Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to Contact Me . Thanks so much!