Company

How To Install And Customize

Access to /index.php/login, and then log in to the management screen .

How To Installation Of Theme

  1. Unzip the downloaded file.
  2. Please upload it in the packages/ of server by the FTP.
  3. Click on the "Add Functionality" in the "extend concrete5" of dashboard.
  4. Click on Install Button, so the display the theme Company to "Install Waiting".
  5. Please Install Company choose content-filled installation or only theme installation.

About Header Site Title Area

In the case of Ver 7.5.13, please fixed the site name using the Content Block without using the HTML Block.(Because It automatically adds <div id="HTMLBlock167" class="HTMLBlock"> when using HTML Block.)
In the case of change to an image using the Content Block add the image using the image icon, then delete the p element by Source.

In the case of Ver 8, please delete the Content Block in the Header Site Title Area and input the code below in the HTML Block.

<a href="/">Site Name</a>

In the case of add images in the Header Site Title Area, You use the Image Block.

About Top Page(Home)

When You installed concrete5 with content, and edited content block. Add automatic an unnecessary element and remove automatic an necessary element by management system. So, Copy and paste the code below and modify it so that it fits your site.

Main Top Parts

<div class="two-box-long">
  <ul>
  <li><a href="./index.php/products" class="future-parts first-parts">
  <h2>Provide high quality products</h2>
  <img src="./download_file/view/top-img01.png" alt="image photo of Provide high quality products" class="left-side-img" />
  <p>Our company provides high-quality products. You will probably be satisfied.</p>
  </a></li>
  <li><a href="./index.php/products" class="future-parts second-parts">
  <h2>High Function Parts</h2>
  <img src="./download_file/view/top-img02.png" alt="image photo of High Function Parts" class="left-side-img" />
  <p>To provide the parts having a high function. It will be the essential thing is for the precision machines.</p>
  </a></li></ul>
</div>
<div class="two-box-short">
  <a href="./index.php/products" class="new-future-parts">
  <h2>New products</h2>
  <img src="./download_file/view/top-img03.png" alt="image photo of New products" class="center-img" />
  <p>The new products are in stock. This product is made in my factory.</p>
  </a>
</div>

Main Middle Parts

<a href="./index.php/services" class="image-box">
<img src="./download_file/view/10/1" alt="image photo of Awesome Features" />
<h2>Awesome Features</h2>
<p>What kind of special features does that have? The greatest features are that it's first of the commodity industry.</p>
</a>

- What's new part(Use Custom Templates)-

  1. It's the page list block of Main Bottom Area.
  2. Click on the "Design & custom templates".
  3. click on the most right of the icon.(Custom CSS class, block name, custom templates and style reset)
  4. Select "company_new_info" from custom template.
  5. Click save.
    (Display  to title and date and description of blog entry. Include the page name and include a description of the page is set to "Yes".)

About Lower Page Custom Templates

- About the mark-up to reproduce the design-

If you want to use Tab UI, Please markup as description.

<div id="tabs">
  <ul>
  <li><a href="#tabs-1">Price</a></li>
  <li><a href="#tabs-2">Graph</a></li>
  <li><a href="#tabs-3">Photo</a></li>
  </ul>
  <div id="tabs-1">
  <h2 tabindex="0">Price list</h2>
  <ol class="grade-list clearfix">
  <li class="grade-list-item">
  <dl>
  <dt class="grade-list-ttl">High grade</dt>
  <dd class="grade-list-important">&#36;80</dd>
  <dd class="grade-btn"><a href="./index.php/contact" class="company-btn">Contact Us</a></dd>
  <dd class="grade-list-desc">100 unit</dd>
  <dd class="grade-list-desc">3 years</dd>
  </dl>
  </li>
  <li class="grade-list-item grade-list-item-best">
  <dl>
  <dt class="grade-list-ttl grade-list-ttl-att">standard</dt>
  <dd class="grade-list-important">&#36;50</dd>
  <dd class="grade-btn"><a href="./index.php/contact" class="company-btn">Contact Us</a></dd>
  <dd class="grade-list-desc">60 unit</dd>
  <dd class="grade-list-desc">1 years</dd>
  </dl>
  </li>
  <li class="grade-list-item">
  <dl>
  <dt class="grade-list-ttl">Basic</dt>
  <dd class="grade-list-important">&#36;25</dd>
  <dd class="grade-btn"><a href="./index.php/contact" class="company-btn">Contact Us</a></dd>
  <dd class="grade-list-desc">30 unit</dd>
  <dd class="grade-list-desc">half-year</dd>
  </dl>
  </li>
  </ol>
  </div>
  <div id="tabs-2">
  <h2 tabindex="0">Graph</h2>
  <p>Please refer to our company performance.</p>
  <svg viewbox="-10 30 400 300" aria-labelledby="graph-title graph-desc" role="img">
  <title id="graph-title">Our Company Performance Graph</title>
  <desc id="graph-desc">The transition graph of 5 years. 2012 is 20%. 2013 is 40%. 2014 is 80%. 2015 is 60%. 2016 is 70%.</desc>
  <rect x="60" y="220" width="20" height="20" fill="#47678e" stroke="#405c7f" id="bar1" />
  <rect x="120" y="180" width="20" height="60" fill="#47678e" stroke="#405c7f" id="bar2" />
  <rect x="180" y="100" width="20" height="140" fill="#47678e" stroke="#405c7f" id="bar3" />
  <rect x="240" y="140" width="20" height="100" fill="#47678e" stroke="#405c7fb" id="bar4" />
  <rect x="300" y="120" width="20" height="120" fill="#47678e" stroke="#405c7f" id="bar5" />
  <line x1="40" y1="40" x2="40" y2="240" stroke="#4c5f76" />
  <text y="220" x="0" stroke="#121011">20%</text>
  <text y="180" x="0" stroke="#121011">40%</text>
  <text y="140" x="0" stroke="#121011">60%</text>
  <text y="100" x="0" stroke="#121011">80%</text>
  <text y="60" x="-10" stroke="#121011">100%</text>
  <line x1="40" y1="240" x2="360" y2="240" stroke="#4c5f76" />
  <text x="53" y="260" stroke="#121011">2012</text>
  <text x="113" y="260" stroke="#121011">2013</text>
  <text x="173" y="260" stroke="#121011">2014</text>
  <text x="233" y="260" stroke="#121011">2015</text>
  <text x="293" y="260" stroke="#121011">2016</text>
  </svg>
  </div>
  <div id="tabs-3">
  <h2 tabindex="0">Photo</h2>
  <p><img alt="products image" src="./download_file/view/16/157" class="image-frame" />
  <br>In a professional context it often happens that private or corporate clients corder a publication to be made.</p>
  </div>
</div>

Please refer to Products page of demo site.

If you want to use Accordion UI, Please markup as description.

<div id="accordion" class="ccm-faq-container" itemscope itemtype="http://schema.org/Question">
  <h2 itemprop="name">Do you personally deal possible ?</h2>
  <div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
  <div itemprop="text">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa 
  <strong>strong</strong>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur mus. </p> 
  <p><a href="#">More information about company</a></p>
  </div>
  </div>
  <h2 itemprop="name">When is a new product?</h2>
  <div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
  <div itemprop="text">
  <ul>
  <li>Lorem ipsum dolor sit amet consectetuer.</li>
  <li>Aenean commodo ligula eget dolor.</li>
  <li>Aenean massa cum sociis natoque penatibus.</li>
  </ul>
  </div>
  </div>
  <h2 itemprop="name">Tell me about company.</h2>
  <div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
  <div itemprop="text">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p><p>elit. Aenean commodo ligula eget dolor. </p>
  <p><strong>strong</strong>. Cum sociis natoque penatibus</p>
  </div>
  </div>
</div>

Please Refer to FAQ page of demo site.

-company_page_title(Use Custom Templates)-

  1. Type text heading in the title block of Main Area.
    (If you don't need change the page title, you do not need to enter the text.)
  2. Click on the "Design & custom templates".
  3. click on the most right of the icon.(Custom CSS class, block name, custom templates and style reset)
  4. Select "company_page_title" from custom template.
  5. Click save.

About All Custom Templates

  1. Click place you want to edit.
  2. Click on the "Design & custom templates".
  3. Click on the most right of the icon.(Custom CSS class, block name, custom templates and style reset)
  4. You choose a custom template that you want to use .
  5. Click save.