CSS automatically disappearing from Content Editor web part - sharepoint-2010

I'm adding some css in content editor web part on my aspx page and css applies well but as soon as I stop editing page css disappears. When I open the web part again I can see empty
<style> </style>
tag. Any idea ?
This page has custom web part and even if I add some inline css to the web part it applies when page loads but disappear when page finish loading..
I'm trying this on Firefox.

Content editor web part does not let you embed style and script elements directly in the page.
Instead, content editor web part lets you link to a css or js source stored in a sharepoint library.
Alternatively, use SharePoint Designer (if installed in your company) to inline style and script.

Related

Add image to icon in header and in stylesheet problems Dreamweaver

Currently in my webpage I am using an image and icon in my header like this from this icon set here in the head tag of my webpage
This works fine, however, when I go to edit my webpages in Dreamweaver, using the properties inspector, the Class option list is huge, pulling from href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> and not mine. Is there anyway to fix this?
When I use the properties inspector in Dreamweaver my Class list is huge! How can I have Dreamweaver use my CSS page first?

The custom layout isn't loading automatically

I have created a custom layout in Layout.hs. This is applied to a reporting page that has a different styling (CSS) and JS from the rest of the application.
The report page is accessed via link in the application.
The problem is that when landing on the report page the custom layout (CSS and JS) isn't applied automatically. It only kicks in after a manual refresh.
Any ideas how to fix this?

How can I disable the mobile theme for a single page?

I recently uploaded custom html and css for one page on my big commerce store.The page is responsive, and mobile optimized. It works on desktops, but is over ridden by the generic mobile theme that is installed when I view it on my phone. How can I stop this page from being over ridden by the mobile version, without disabling the mobile theme completely?
Thanks,
There are 2 methods off the top of my head.
First method
Any HTML file on BigCommerce, with a mobile/responsive theme, has 2 copies of some part of the HTML page. The mobile HTML/CSS is simply triggered by an HTML class mobile on the HTML copy that is there to be only seen on mobile, which contains one copy of relevant HTML (ie, menus, logo, shopping cart icon and link, etc).
Another HTML block has class desktop and is only triggered for certain screen sizes (similar to mobile), and only shows it's desktop version of the HTMl when the screen size conditions are met.
So if screen is small, in your responsive.css file, .mobile is display:none;, while desktop class has all the proper visible CSS.
On the reverse, on desktop-sized screens, the desktop HTML is properly styled, while the mobile class HTML block is display:none.
So, in this first solution, you would simply place a copy of your custom HTMl and style it properly for display on mobile screens. This way, the mobile-styled version will only show up on mobile devices, while the desktop properly-styled version will only show up on dektop size screens. As far as BC goes, I think this is the optimal method.
Second method
You can make a custom template for the page in question. So if it's product.html and you want it custom for some specific product(s), you would create a product-custom.html and place it in your WebDav "/template/Panels" folder.
Now, on your product(s) which must use the new custom HTML, go to their page and scroll to the bottom and you will see a template file selection box, which should say product.html. Change that to your new product-custom.html.
Now, as for the custom file, simply edit the HTML/CSS rules revolving around .desktop and .mobile class (possibly just removing them all together) so that when a page is loaded on a small screen, the CSS rule to hide the desktop version won't apply. At the same time, you should delete the duplicate .mobile class HTML as it will no longer be needed.
This second method is much more flexible but also takes more work and is generally much more messy and requires much more maintenance.
I strongly recommend method #1.
Let me know if this helps and if you have nay other questions.

SharePoint 2010: Move Default Search box to Footer

Without using the SharePoint Designer or Visual Studio, is there a way to move the Default Search box to Footer of a page or to a specific custom div tag?
I have found CSS that will allow me to move it to the top of the page however it does not work well when trying to move it to the footer.
This is the CSS that will move it to the top of the page:
.s4-search
{
TOP: 10px;
RIGHT: 400px! important;
POSITION: fixed;
}
There is a div-class called SRSB which you could use to reposition the item. Either by using CSS and using absolute position or similar, or alternatively you could use jQuery to reposition or move it to a different div on the page.
See Difference between div id and div class for using CSS & ID and for moving the elment http://api.jquery.com/category/manipulation/
If you have access to the Master Page Gallery through the browser, you can edit the master page to move the PlaceHolderSearchArea content placeholder.
Go to your site's home page.
Site Actions > Site Settings
On the Site Settings page, click "Master pages and page layouts" under Galleries.
Download your master page (probably v4.master).
Find the [asp:ContentPlaceHolder id="PlaceHolderSearchArea"] tag. Move this where you would like it on the page.
Save and upload back to the Master Pages and Page Layouts Gallery. Check in, publish, and approve.
I highly recommend you not edit the out-of-the-box master pages (like v4.master)--instead copy it to create a custom master page. I won't go into those details here.

How to dynamically associate html content through Onet.xml in Content Editor WebPart?

We are using SharePoint Foundation 2010
We have a custom site definition where in Onet.xml we have placed a Content Editor Web Part on a Custom ASPX page having encoded html content in it just like how it is described in this article.
Issue with this approach is that following this approach makes the HTML content static and can not be dynamically changed for each user.
Is there a way i can make Onet.xml refer an HTML file from a SharePoint folder e.g. Layouts, so that when content gets changed in the HTML file, it gets reflected for each user on their custom page ?
Got it, I think I will be using Page Viewer Web Part instead of Content Editor Web Part which would make my life simpler. I would add an html file path from say Layouts folder and refer it in my Page Viewer Web Part. This way my content would remain dynamic.