Jump to content
Sign in to follow this  
mdcryan

Which Framework Components used in Pagelines Jobs pages

Recommended Posts

mdcryan    0
mdcryan

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
greenfly    230
greenfly

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/


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
mdcryan    0
mdcryan

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
Rob    547
Rob

Is this matter is resolved?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • fancoder
      By fancoder+
      I apologize I have looked for answers to my issues and I am still having difficulty. I am doing my best to understand how to make certain sections show up only on the page I am working on. Example I created a ProPricing section that is showing up on other pages. How can I make this section only show up on the Pricing menu item? http://ReachBali.com/pricingthis is also showing up on all other pages that I have used the default page setting on.
       
      http://ReachBali.com/about
      http://ReachBali.com/pricing
      http://ReachBali.com/ibeacons
       
      Thanks for any help 
      Fancoder
    • leftcoastmichael
      By leftcoastmichael+
      Hi. I have a content post/loop 8/12 and an iCallout 4/12. I'm trying to place the iCallout to the right of the Content Post/Loop but it won't seem to stick. I tried  changing the iCallout to 3/12 and that also won't work. See video clip:
       
      http://youtu.be/6Axs1UmH1lA
       
       
      Likewise, I tried inserting a 2-Column Section.  It works fine at 6/12 and 6/12, but when I reduce one to 4/12 and increase the other to 7/12, they split.  Is this a bug?
       
      http://youtu.be/u7mni7ndB8Y
    • velocityconcepts
      By velocityconcepts
      Hello, 
       
      I am new to Pagelines and DMS.. I just got the new DMS and there seems to be a lot of things to overcome with building a theme this new way... 
       
      My big problem right now is a bug in the Mediabox Section. I added this to my site and then I could not edit it at all.. Couldn't delete it, could not add an image to it or anything! 
       
      I finally just had to FTP in and delete the section from the theme cause it was totally useless. 
       
      Anyone else have this problem? Is there a solution to these bugs? Hopefully we can get some stuff fixed up and a new DMS release real soon. 
       
       
       
    • jonthompson
      By jonthompson
      I am trying to replicate the 'find', 'list', 'contact' menu bar here: http://www.huntersfairwaysothebysinternationalrealty.com/eng 
       
      I believe I can do this with bootstrap components so I ended up putting this up there:
       
      <div class="bs-docs-example"> <div class="tabbable tabs-left"> <ul class="nav nav-tabs"> <li class="active"><a href="#lA" data-toggle="tab">Find</a></li> <li><a href="#lB" data-toggle="tab">List</a></li> <li><a href="#lC" data-toggle="tab">Contact</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="lA"> alkdflkjas </div> <div class="tab-pane" id="lB"> The Art of Selling your Home. </div> <div class="tab-pane" id="lC"> <h2 style="padding-left: 30px;">Two locations to best serve your needs.</h2> <div class="info-block"> <p style="padding-left: 30px;"><a class="btn" href="/eng/offices/usa">VIEW LOCATIONS</a></p> <p style="padding-left: 30px;"><a href="/office/316-b-972-4000408">Wynstone</a>: +1 847.381.7100</p> <p style="padding-left: 30px;"><a href="/office/316-b-2013-4000932">Downtown Barrington</a>: +1 847.381.2049</p> <p style="padding-left: 30px;"><a href="mailto:info@huntersfairwaysir.com">info@huntersfairwaysir.com</a></p> </div> </div> </div> </div> </div>  
      with this css:
      .tabs-left .nav-tabs > li > a { background-attachment:scroll; background-color:transparent; background-image:url(http://www.huntersfairwaysothebysinternationalrealty.com/resources/v_1_1_21_2/palettes/sir.dms.one/images/bg-footer-home.png); background-position:0 0; background-repeat:repeat repeat; color:#FFFFFF; float:left; padding:15px 20px 15px 30px; width:260px; } .tab-content { background-color:transparent; background-image:url(http://www.huntersfairwaysothebysinternationalrealty.com/resources/v_1_1_21_2/palettes/sir.dms.one/images/bg-footer-home.png); background-position:0 0; background-repeat:repeat repeat; display:table; padding-top:5px; width:100%; margin-left:313px; margin-bottom:313px; } h2 { color:#ffffff; font-size:28px; }  
      I cannot figure out how to move the tab content div up to be even with the menue items. 
       
      you guys rock, btw
       
       
×