I just go through the bootstrap framework, its a grid based css framework but I dont know how implement in IBM Websphere Portal 8.
code
<!DOCTYPE html>
<body class="lotusui30dojo tundra locale_en">
<div class="wpthemeFrame">
<header role="banner">
<div class="wpthemeHeader">
<a rel="dynamic-content" href="dyn-cs:id:customTheme_preview"></a>
<div class="wpthemeInner">
<div class="wpthemeLogo wpthemeLeft">
I suggest you to create a normal static HTML Prototype using Bootstrap. Once you make sue it's working properly (in responsive manner) you can start porting the source code to Portal. There are 3 parts:
First you have to copy paste the html part other than the middle content area (ie. the header part and the footer part) into theme_en.html in your custom folder. Then replace the css and JS links header part with
Then replace blocks of code with appropriate Dynamic Spot contents (JSP files). For instance something like,
<a rel="dynamic-content" href="res:/customTheme/themes/html/dynamicSpots/banner.jsp"></a>
Also, please make sure at the end of page you have this,
<div class="wpthemeComplementaryContent" id="wpthemeComplementaryContent" role="region" aria-labelledby="wpthemeComplementaryContentText">
<span class="wpthemeAltText" id="wpthemeComplementaryContentText" >Complementary Content</span>
<a rel="dynamic-content" href="co:config"></a>
</div>
Now we have to take the layout structure from the middle part of HTML area and use it for creating a Template Layout. Remember, in each template layout we have to keep the div for hidden widgets. Better way is to copy one existing layout.html file from Template Layouts and rename it and modify in that. If you are using Bootstrap, you don't have to use default WP classes. But few must be integrated, like DndRow,DndColumn, Componet-Container etc.
Now for each page specific styling, you can manage in Presentation template.
Related
I'm trying to build a basic documentation site using asciidoctor. One thing I am struggling with is how I can inject a standard site header (a banner with a logo and top-level navigation) into each documentation page.
I render my asciidoc directly to html from the command line. I have tried to find a way to somehow inject an extra div element and position it fixed at the top, but I can't figure out what mechanism to use for this. My early attempts involved using docinfo.html but that gets injected into the html in the <head> element, instead of the <body>.
I am aware that full-on publication systems like Jekyll allow me to configure "front matter" that can probably take care of this, but I was hoping there was a mechanism or trick using vanilla asciidoctor that can achieve this.
Ted Bergeron on the Mailing List mentioned a simple project:
Demo website created just using Asciidoctor.
Check the corresponding repo to see the files and how to create the site (just using one command).
In summary: simply create a header asciidoc file that includes your site nav (in the demo site this is done using table markup), without including a level-0 (document) title. Include this header file right at the top in every page of your site. Then render by just running asciidoctor *.txt on your project.
--embedded option + simple post processing
With this option, asciidoctor generates only the interior part of the <body> element.
For example:
main.adoc
= Super title
== Second level
asdf
== Also second level
qwer
then:
asciidoctor --embedded main.adoc
produces:
main.html
<div class="sect1">
<h2 id="_second_level">Second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>asdf</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_also_second_level">Also second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>qwer</p>
</div>
</div>
</div>
You can then just cat a header and closing footer, and you are done.
Tested with Asciidoctor 2.0.10.
i am getting alignment problem while using bootstrap in visual studio specifically with bootstrap columns. when i using div with class col-md-4 it just automatically moves some space right and not align properly...... but when the code is writing in notepad++ and and save as .html file it works correctly...
help me to find out what exactly problem with visual studio2013
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestForm.aspx.cs"
Inherits="WebApplication1.Pages.TestForm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="../css/bootstrap.css" rel="stylesheet" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="jumbotron no-Margin">
<p>H5BP contains a number of best practices or
common inclusions for your initial HTML
template,which is more like the generic "default"
template you would use as server-side global
template.Bootstrap does not provide anything like
this(nor does it need or aim to). So in this
regard,H5BP is perfectly suited to including HTML
components from anywhere else (e.g. those from
Bootstrap).
</p>
</div>
</div>
<div class="container">
<div class="col-md-4">
<p>H5BP contains a number of best practices or
common inclusions for your initial HTML
template,which is more like the generic "default"
template you would use as server-side global
template.Bootstrap does not provide anything like
this (nor does it need or aim to). So in this
regard,H5BP is perfectly suited to including HTML
components from anywhere else (e.g. those from
Bootstrap)
</p>
</div>
<div class="col-md-4">
<p>H5BP contains a number of best practices or
common inclusions for your initial HTML
template,which is more like the generic "default"
template you would use as server-side global
template.Bootstrap does not provide anything like
this (nor does it need or aim to). So in this
regard,H5BP is perfectl suited to including HTML
components from anywhere else (e.g. those from
Bootstrap)
</p>
</div>
<div class="col-md-4">
<p>H5BP contains a number of best practices or
common inclusions for your initial HTML
template,which is more like the generic "default"
template you would use as server-side global
template.
</p>
</div>
</div>
<script src="../js/jquery-1.12.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</form>
</body>
</html>
browser view are given as images below
image showing columns alignment error when using visual studio
image showing columns align properly when using notepad++
My best guess is that your stylesheet is not loaded.
are you sure "../css/bootstrap.css" is the right path?
you are moving one level down to localhost and then looking for the folder css
Open the developer console by hitting F12, move to the timeline tab and inspect the request of your css file.
There is no other magic that Visual Studio does to your css!
I have recently started writing some server side code for our new bootstrap themed administrative site.
In the markup I can not find where/how/why bootstrap is adding random anchor tags to some of the HTML divisions.
Example from chrome developer tools below... these exist nowhere in the markup.
Is there a way to disable this?
How does it silently create these anchor tags?
What is the reason behind this?
Here is the html , it adds a partial view with Razor to render the body, but before that you can see where the anchor from the image above is not written.
<div class="page-content-wrapper">
<div class="page-content" style="overflow:auto;">
#RenderBody()
</div>
</div>
<!-- END CONTENT -->
quick question here:
I am using DCE on Typo 6.1.5. I am trying to set an element out of the "container" div. But it rarely works.
<div id="contentMarginFix">..</div>
<div id="contact">
<div class="container">
<div class="gmaps">
</div>
</div>
</div>
I want to get the "gmaps" div in the "contact" div. Not in the "container" one.
Here is the DCE Template
http://gyazo.com/2c0a13746cdd834ebdb86a0b64fd10b1.png
And here is the template for the page
http://i.imgur.com/y2rwP6P.jpg
I was trying for two hours now maybe i just don't see it but i appreciate your help very much!
From the screenshots you provided I'd say it's possible the layout template is in the wrong place. Make sure the contact.html you use as a layout is in the right place.
If this is a basic fluid template directly in typo3 make sure the file is in the place you defined in your setup typoscript. Default would be something like this:
layoutRootPath = fileadmin/templates/Layouts/
If this is inside an extension the correct place for the layout template is
Resources\Private\Layouts
Be aware that in more recent extbase versions the naming conventions are more strict and require a capital first letter for the html files (so Contact.html)
Hi I am new to web programming. I want to create a template sort of css where all the pages look the same except the content of the pages.
So I have a logo and some tabs at the top where you can navigate the website, but the content of the pages would be different (contact, about, info.etc).
How do I go about creating this template?
You might want to try building your template page in plain HTML + CSS, and then using simple PHP includes to build your pages. You could, for example, break your page into two separate files:
header.php:
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<div id="main-content">
and footer.php:
</div>
</body>
</html>
And then, for any files that use that template, you'd use something like this:
<?php include("header.php"); ?>
<!--All the content of your page goes here-->
<h1>Hello World!</h1>
<p>Lorem Ipsum</p>
<?php include("footer.php"); ?>
So then if someone visited the previous file (let's say it's called index.php), then the files would be assembled and the final HTML output would look something like:
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<div id="main-content">
<!--All the content of your page goes here-->
<h1>Hello World!</h1>
<p>Lorem Ipsum</p>
</div>
</body>
</html>
Just make sure you have PHP running on your server, or this won't work at all. Also, if you want to develop your site locally, I'd recommend using XAMPP to get a local Apache host.
You have a look at some of the many template sites - e.g. http://www.freecsstemplates.org/ or http://www.freecsstemplates.com/. Chances are you'll find something close to what you want to achieve.
I suggest starting with a paper sketch. Just draw boxes for the different areas each page will have... like Logo, Header, Content, Footer, etc. There's many ways to approach this initial stage. Here's one explanation of the gray box method.
Once you have a rough idea like this, create 1 sample page. You can fill in the content with lorum ipsum. Get the CSS to how you like it, and make sure that each section of the page (roughly each box in your rough sketch) is in it's own unique div (id = "...").
Once you have all of this set up, you'll have your CSS file ready to go.
To create your template HTML file, just take the HTML page you've been working on and delete all the lorum ipsum.
CSS Zen Garden is a great place to look for CSS inspiration.
If you're a beginner, I could suggest trialing Adobe Dreamweaver and looking at using DreamWeaver (.dwt) Templates. It's really, really easy to use and it allows you to create 1 master (template) file with editable parts.
If you have Visual Studio, MasterPages do a similar job!
Good luck and welcome to the Web Development world!