Apply Fluid Layout to existing site?

Has anyone been able to apply the CS6 Fluid Layout to existing Dreamweaver site pages? I have about 1000 pages, all template-based that I wojld love to convert to Fluid Layout if there is a reasonably efficient way to do it. Any info or a link to a tutorial on this would be appreciated. I am going crosseyed right now from all of the searching!

I don't have CS6, so I don't know what the Fluid Grid Layout is that Murray's talking about. But if what you are trying to do is to create pages that fill the browser window, that's easy.
And I think you don't have to alter your template(s) -- it can be done in your style sheet.
Almost all web pages have an outer "wrapper" that everything else (save the body) lives in. So, for a fixed-width website, you do the following:
#wrapper {
               margin: 0 auto; /* this centers your main content in the web page */
               width: 980px; /* This is the maximum width of your website in pixel units. */
For a fluid width, you do the following:
#wrapper {
     margin: 0 auto; /* this centers your main content in the web page */
     width: 100%; /* this sets the width to the viewport */
Now, one thing I do like to do is specify a minimum width, which I do in the body:
body {
          min-width: 760px;
I also like the CSS Tricks example, which specifies minimums and maximums, giving you "fluidity" up to a point.

Similar Messages

Update content type template for existing sites in sharepoint 2010 ?

Hi,
I created one custom document library (list definition) and associated 3 content types which has docment template path (\_layouts.template1.docx). I rollout nearly 200 sites with this definition. now i want to update my document template and also i want
to change template docx to dotx.
what is the best approach to apply these changes for existing sites ?
Thanks,
Surya.
suryakumarp

Hi suryakumar,
As I understand, you want to update the template
for existed content type.
It can be achieved by programming. There is a
SPContentType.DocumentTemplateUrl Property, which can be used to update content type.
Here is a demo:
http://officepoint.blogspot.com/2008/06/sharepoint-relink-infopath-forms-relink.html

How to apply CSS to Existing Site

Help! I am a Macromedia Dreamweaver user. I manage a few simple sites on a volunteer basis. I was recently forced by a new computer purchase to upgrade to CS4 for Vista compatibility.
I have never used Style Sheets. I've spent several hours this afternoon combing the web for instructions and found that most of the information assumes way more knowledge than I have, and the more basic articles seem to provide nice overviews of what CSS is and why one might want to use it, or possibly how to build a new site using CSS, but they have not answered my "how to" questions about my existing sites.
My two most pressing unanswered question are these:
1) I seem to have successfully created a new CSS rule by selecting a section of text in the document, setting the Property Inspector to CSS and then naming the rule and choosing a font style and size (although the new rule dialog box never appeared - I did it all in the Property Inspector). Do I have to go through the whole site and apply this rule individually to each section of body text? The existing document has all the text set by its specific features (e.g. Arial Bold 10), not using "heading 1" "heading 2" etc.
2) I do not use Dreamweaver to upload my finished documents. I use a site-managemet ftp page on my host server. Once I've created these CSS style rules, is there anyting that I need to upload besides my edited pages?
Thank you in advance for help.

If you are using the same font family, font size, colour, etc... you can use a separate style sheet and just use
body {font-size:14px; font-family:arial, helvetica, sans-serif}
this will make all your site the same body style.
Do I have the book for you: CSS in easy steps by Mike McGrath isbn#1-84078-301-x
It's a really good beginner's book to CSS. And really easy to read! Was a huge help to me in my beginnings of CSS.
Also, www.lynda.com is a great resource.
Hope this helps!
You'll need to upload that extra css page with the rest of your site!
Message was edited by: JulesN

Using Muse to add a mobile layout to an existing Site?

I have some customers who already have live sites built outside of Muse who are interested in adding a mobile layout. Is it possible to add a mobile layout with muse to an existing site? I plan on trying this out this weekend but wanted to know if anybody beat me to it.
Thanks!

If you're looking to design and publish just a mobile site, you can easily do it through Muse. When you start a new project in Muse you can select the Initial layout to be Phone and begin planning and designing your mobile site. If required, you can later add the Desktop and Tablet layouts to your project as well. Then when you're ready to publish your mobile site (to either Adobe hosting through Business Catalyst or to your own third party host), you can upload the site to a host directory of your choice so as to not touch the existing desktop site files. Alternatively, you always have the option to export the site as HTML and publish it anywhere you like through a FTP client like WinSCP or Filezilla.
Thanks,
Vinayak

Adding phone layout to existing desktop site - No scratch page created

Trying to make a phone version of site created in muse but no scratch page is created in desktop plan after adding phone layout. Ideas?

I'm following adobe help tutorial http://helpx.adobe.com/muse/tutorials/creating-mobile-layout-designs-muse.html#id_25691htt p://
Under heading "Adding Phone Layout to Existing Muse Site" #3 starts refering to "scratch page"

Dreamweaver fluid layouts

If I have a website done in Dreamweaver (done for computer screens) and I want to use fluid layouts to make this for devices and pads, do I have to start from scratch to create a new site, or can I bring my files in from my existing site?

If you're using the Fluid Grid tool, starting over and designing using the "mobile first" approach would be the way to do it. FG's are built with the idea that the global attributes are for a mobile device, then the media queries overwrite them for tablets and then desktops. Starting with the desktop design and working backwards would be pretty frustrating.
That being said, depending on how you set the site up html-wise, it may not be very difficult at all to add your own Media Queries (not using the FGL tools) to it to change styling for smaller devices.
Could you share a link to your site in progress?

Issues editing HTML on an existing site.

I am attempting to replace the existing content in a site's left panel with custom HTML.
I refined the HTML working with a new blank subsite and was able to use the "Edit HTML" option directly in the Left Panel without adding a Content Editor Web Part.
When I go to the existing site I am unable to get the "Edit HTML" option within the panel itself and when I add a Content Editor Web Part it completely breaks my formatting.
Is there any way to apply HTML directly to an existing site panel without using a web part?

Hi ,
According to your description, my understanding is that you want to customize the quick launch of your SharePoint 2010 site.
For your issue, you can use the SharePoint web interface or SharePoint Designer 2010. You can have a look at the blog:
http://sharepointpromag.com/sharepoint/four-ways-add-or-remove-quick-launch-menu-control
http://msdn.microsoft.com/en-us/library/office/ms466994(v=office.14).aspx
http://office.microsoft.com/en-in/sharepoint-server-help/configure-the-quick-launch-for-site-navigation-HA102130960.aspx
Best Regards,
Eric
Eric Tao
TechNet Community Support

My Site Branding - How can we have it applied for dynamically created My Sites? (/personal/username)

Hi,
I have a SharePoint 2013 environment in which My Sites are enabled.
As you know the My Site of every user gets created in /personal/Username dynamically, when a User goes to his "My Site" from the "About Me" link.
The requirement is for us to apply a custom master page / styles for the all My Sites
How do we do this in a way - where it gets applied for all the existing My Sites and also the My Sites that will get created in the future? What will be the right help?
Please help on this.
Karthick S

Hi Karthick
You can do it using feature Stapling
http://sharepointologic.blogspot.in/2013/04/branding-sharepoint-2013-my-sites-with.html
https://sharepointqna.wordpress.com/2013/08/29/my-site-master-page-change-feature-stapling/
Please mark it as answer if it helps you solving your problem
Amit Kotha

How to apply "Custom Layout" to a XSLT + COCOON + APACHE Report

I've created a new shared Report Layout, the Report Layout Type is "Generic Columns (XSL-FO)" , under " Home > Application Builder > Application 106 > Shared Components > Report Layouts ", this layout just adds the font-style="italic" color="red" attributes to the column headings.
How can I apply this Layout to an existing or a new report?
Thanks for your help.
Nelson

Found what I was looking for, since existing repots, can't get it's XML extracted a report can't be generated from them. Only for a new custom query.
The answer would be:
Create a custom query, extract XML, create a XSL Template from the XML, upload the template, USE :D.
Nelson.

Fluid layout problem

I have decided to rebuild my site from a fixed with layout to fluid/responsive. So far, I've set up a test page with a fluid layout, but it's not working as expected. See http://www.perberntsen.com/responsive_test.html
The relevant css is in the page.
When I make the browser window smaller, the columns will resize, but the rightmost column will drop down much too early, leaving lots of white space. (It does continue to resize, although out of sight.) I am planning to use media queries, but I dont't think they should be neccessary to achieve what I'm trying to do.
Things I've tried:
Removing min-width on the menu (didn't help)
Removing the header (didn't help)
Using position:relative (didn't help)
I've also read Ethan Marcotte's book on the subject as well as various articles on the internet.
Would be very grateful if someone could point me in the right direction ...
Edit: I also tried disabling external css and javascript, both of which didn't help. I am pretty sure the answer lies in the css.

No knowledge of responsive, but narrowing the min width to 150 looked pretty good in FF
#nav {
    background-color: #F4F4F4;    border: 1px dotted #505050;
    float: left;
    margin-top: 0;
    min-width: 150px;
    width: 15.3333%;

Attach existing CSS style sheet to existing site

Hello all,
I have an external CSS style sheet called default.css. I have an existing site of 61 pages that I want to apply default.css. Is there a way to apply a CSS file to multiple pages? Or am I doomed to going through the process 61 times?
Thanks for your time.

Thanks for replying Ben.
I 'forced' it to work. Fortunately, the pages were all linked to the same style sheet, so I just did a 'Find and Replace All'.
Thanks again.

Integrating CS pages in to existing site

Hi
I am working on an existing site, where we want to make available a couple of new pages that are been fed up from the content server. The documents in the cs are been translated correctly to html via the templates we define in Site Builder. However, the existing site has its on navigation, look and feel etc. I know site builder allows you to embed html round the translated page but i think this is to messsy particulartly because the nav and existing look and feel is complex.
As the cs returns the pages as a "distinct" web pages, i.e. they have their own <html> , <head>, <title> tags etc. First of all, is their any way of configuring the content server such that it does not return the translated document as a "distinct" page. Secondly, if the translated doc can only be returned as a "distinct" page, is their any best practise in terms of how to integrate the cs generated page with an existing site. We are not using frames, but I was thinking of using iframes.
Thanks in advance

Hi,
It's been a some time since I played with content publisher, but I believe you can remove all that stuff by editing the layout template for the project.
David

Fluid layout

Hi,
I am trying to build a site with fluid layout. I have three
classes: Preloader, Main and Background.
Preloader loads main.swf and has resize function where it can
access Background like so:
Sprite(loader.content).getChildAt(0).y = stage.stageHeight -
Sprite(loader.content).getChildAt(0).height;
Main has an instance of Background.
Background draws vertical lines. It uses fluid layout on its
own. Works fine.
Here is the catch:
Background utilizes stage.stageWidth and stage.stageHeight,
when tested with separate fla works like charm. However, when
accessed thru Preloader throws this error: Error #1009: Cannot
access a property or method of a null object reference. I think it
is because use of stage but I don't know how to go about it.
It also uses its own resize function.
So, what is the best way to put it all together? Where should
I keep resize function? What I need to do with stage object in
Background?
Hopefully I explain more or less coherently what is the
problem.
Here is abbreviated code for all three classes:

I just used the publish settings myself don't know if it will
help you it worked for me on this site.
http://www.cybermountainwebservices.com/client0/date/
settings:
http://www.mespinach.com/fluid.gif

Fluid Layout - stop changing resize position when movieclip is at certain position

Hello. I have been trying things out for hours, and I still can't get it.
I am following this Fluid Layout tutorial: http://active.tutsplus.com/tutorials/web-design/build-a-fluid-website-layout/
I added a Menu_mc on my stage. Initially, this should be at the center of the stage and when I click on it, it will tween on the upper left corner of the browser. However, when I resize the browser, the Menu_mc goes back to the center of the screen.
I have tried separating a different actionscript file where it is specifically for initialization of the object and another one for resizing. And then when I call it on my main AS file it goes like this:
// Add the symbols to stage
             var Menu_mc = new Menu_MC();
             addChild(Menu_mc);
             // Apply the alignment to the middle
             var Menu_InitParam = {
                 x:0.53,
                 y:0.35,
                 offsetX: -Menu_mc.width/2,
                 offsetY: -Menu_mc.height/2
             new InitFluidObject(Menu_mc,Menu_InitParam);
             var Menu_ResizeParam = {
                 x:Menu_mc.x,
                 y:Menu_mc.y,
                 offsetX: -Menu_mc.width/2,
                 offsetY: -Menu_mc.height/2
             new FluidObject(Menu_mc,Menu_ResizeParam);
But it seems futile. Could anyone please help? Thanks a lot!

Do you have any useful resources that I could perhaps check out? Haven't explored ANY javascript before =)

Dreamweaver CC understanding external style sheets when using Fluid layouts?

I'm attempting to build a website using the Dreamweaver CC Fluid layout feature. I've been using this tutorial:
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
The bit i'm stuck at is when it comes to attaching a external style sheet to format the text and content. So to be clear, i've already created my fluid layout and created a 'layout.css' file when promted, then using some html 5 class div tags (header, navigation and article) i've built my layout. All doing what I want up to this point.
Now I need to start adding content and from what I understand its much better practice to set up another external style sheet for the text formatting and styling.
I used the CSS Designer to 'create a new CSS file', called it 'typography.css' and I can see its linked to the main Source Code file.
I understand that theory but here is where its confusing for me:
After creating and linking the new CSS file what do I do next? Do I have to hand code in various text formatting ids or is there a more visual way of doing it? Or do I select my text content in the source code page and then press the '+' button in the 'Selectors' panel to start adding ids that way? And should the class or id names in the new CSS file be the same as in the layout CSS file or different?
I guess I dont really understand excatly how external style sheets should be created and implemented, all the youtube vids i've watched so far are done with hand coding but i'd like to use the Properties panel to do it in a more visual way if possible.
Any tips or help greatly appreciated, some basic learning needed. Thanks.

Giving a detailed explanation of how to best use CSS goes beyond the scope of what this forum can do. There are volumes of books, blogs and tech sites devoted to this topic.
A Must Read -- How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
In a nutshell, make the most of your logical HTML tags. They not only add semantic structure to your content, they serve as hooks for your CSS styles. Don't class or ID something unless you absolutely need it. The goal here is to keep your HTML streamlined.
/**effects all h2 tags in your site**/
h2 {font-size: 125%}
/**only effects h2 tags inside headers**/
header h2 {color:orange}
/**effects all p tags**/
p {font-size: 100%}
/**only effects p tags inside articles**/
article p {color:#333}
Nancy O.

Apply Fluid Layout to existing site?

Similar Messages

Maybe you are looking for