Archived

This topic is now archived and is closed to further replies.

  • 0

Which Framework Components used in Pagelines Jobs pages


Question

Posted · Report post

I am trying to identify how the Pagelines Job pages were together

 

http://www.pagelines.com/jobs/

 

- in other words what components were used to construct the page that way and how does the Secondary navigation work to make it look  a "page wihtin a page"

 

I am a newbie and getting my head around how to use which components is till a struggle

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

This page was created using customised sections that are not available in the store. 

 

You could get a similar effect using banners (http://demo.pagelines.me/sections/) and the 'Page within a page' section can be reproduced using tabs (http://demo.pagelines.me/sections/)

 

If you want someone to recreate the site for you feel free to speak to one of the Pagelines Pros http://www.pagelines.com/pros/

Share this post


Link to post
Share on other sites

Posted · Report post

OK - I solved it though half a day of playing with the JQuery UI code for vertical navs.

 

For anyone else wanting to do this...I have attached the code I used. It is very similar to the http://www.pagelines.com/job/ code

 

1. In a content-box on any given page you need the following HTML pasted in.(Note I have also posted the function here which is wrong, but it works. You can move it out to your functions.php file to be neater

<script>
$(function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});
</script>

<h2>Open Positions</h2>
  <p> Ad text here as intro. This sits above the panel with vertical tabs</P>

  <ul class="the-tabs unstyled tcol tcol-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <lh>Job Title</lh>
    <li class="tcol-tabs"> <a href="#tabs-1">Job 1</a></li>
    <li class="tcol-tabs"><a href="#tabs-2">Job 2</a></li>
    <li class="tcol-tabs"><a href="#tabs-3">Job 3</a></li>
  </ul>
  <div id="tabs-1" class="tcol-standard" >
    <div class="pad-me">
      <h2>Job no 1 Title</h2>
      <div class="hentry">
        <p>YOUR JOB #1 DESCRIPTION HERE</p>
<p>Suggest you add an APply button that links to an application form</p>
      </div>
    </div>
  </div>
  <div id="tabs-2" class="tcol-standard" >
    <div class="pad-me">
      <h2>Job No2 Title</h2>
      <div class="hentry">
         <p>YOUR JOB #2 DESCRIPTION HERE</p>
<p>Suggest you add an Apply button that links to an application form</p>
      </div>
    </div>
  </div>
  <div id="tabs-3" class="tcol-standard">
    <div class="pad-me">
     <h2>Job No3 Title</h2>
      <div class="hentry">
         <p>YOUR JOB #3 DESCRIPTION HERE</p>
<p>Suggest you add an Apply button that links to an application form</p>
      </div>
    </div>
  </div>
</div>

2. You need to add Css styling to the elements. 

/*Tabbed jobs form*/
.ui-tabs-vertical {
	width: 55em;
}

.ui-tabs-vertical .ui-tabs-nav {
	padding: .2em .1em .2em .2em;
	float: left;
	width: 10em;
}

.ui-tabs-vertical .ui-tabs-nav li {
	clear: left;
	width: 100%;
	border-bottom-width: 1px!important;
	border-right-width: 0!important;
	margin: 0 -1px .2em 0;
}

.ui-tabs-vertical .ui-tabs-nav li a {
	display: block;
}

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
	padding-bottom: 0;
	padding-right: .1em;
	border-right-width: 1px;
	border-right-width: 1px;
	background-color: #faa732;
}

.ui-tabs-vertical .ui-tabs-panel {
	padding: 1em;
	float: right;
	width: 40em;
}

.tab-panel {
	border: 0 solid #999999;
	border-radius: 5px 5px 5px 5px;
	margin: 0 auto;
	Background-color: #333333;
	max-width: 90%;
	overflow: hidden;
}

.tab-panel .tcol {
	float: left;
	margin-bottom: -99999px;
	padding-bottom: 99999px;
}

.tab-panel .tcol-tabs {
	background: none repeat scroll 0 0;
	font-size: 1em;
	font-weight: 400;
	width: 29%;
}

.tab-panel .tcol-tabs lh {
	color: #428CE7;
	Display: block;
	font-size: 1.4em;
	font-weight: normal;
	font-style: normal;
	font-variant: small-caps;
	padding: 10px 0 10px 5px;
}

.the-jobs-title h2 {
	font-size: 36px;
	margin: 50px 0 10px;
	text-align: center;
	color: #faa732;
	font-weight: normal;
	font-style: normal;
	font-variant: small-caps;
}

.tab-panel .tcol-tabs li {
	border-bottom: 1px solid transparent;
	border-top: 1px solid transparent;
}

.tab-panel .tcol-tabs li a {
	color: #ffffff;
	display: block;
	padding: 7px 0 7px 25px;
	text-decoration: none;
}

.tab-panel .tcol-tabs li a:hover {
	background-color: #428CE7;
}

.tab-panel .tcol-tabs li a:active {
	background-color: #faa732;
	color: #ffffff;
}

.tab-panel .tcol-standard {
	width: 66%;
}

.tab-panel .tcol-standard .pad-me {
	min-height: 450px;
	padding: 0 10px 35px 35px;
/*background-color:#555555;*/
	color: #ffffff;
}

.tab-panel .tcol-standard .pad-me h2 {
	color: #428CE7;
	font-size: 1.4em;
	font-weight: normal;
	font-style: normal;
	font-variant: small-caps;
}

.tab-panel .hentry {
	color: #ffffff;
	font-weight: normal;
}

.tab-panel .tcol-standard .pad-me h3 {
	color: #428CE7;
}

.tab-panel .tcol-standard p, .tab-panel .tcol-standard ul, .tab-panel .tcol-standard ol {
	font-size: 1em;
}

3. Lastly you need tot ensure you have the following Link called. I ended up putting this in my headerscripts and at the time of writing I am trying to make it more elegant by relocating this to the functions.php file, but it works (although according to the experts it shouldn't)

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Share this post


Link to post
Share on other sites

Posted · Report post

Is this matter is resolved?

Share this post


Link to post
Share on other sites