How to Add CSS to Sharepoint 2010 Webpart Without Changing its Visual Appearance

I've been struggling for hours trying to figure out how to get my Stylesheets into my Webpart. I've come across several resources that claim to explain how it works.

  • Using custom css within a Sharepoint webpart as a Embedded Resource is not working, why?
  • And some others that essentially say the same thing

The first resource works, but I shouldn't have to manually place a CSS file in a specific folder on each system (Dev, Test, Live). There must be a way to embed the Webpart into the deployment file for the project.

In searching for this, I found the second link I posted. It seems like something I want to do, but I just can't seem to get it to work.

My structure looks like this:

./SOLUTION
  > Properties
  > References
  > ...
  > Webpart1
    > ...
  > Webpart2
    > Webpart2.css
    > ...
  > Styles (A Folder of VS Style 'Module')
    > wp2.css

Can someone please guide me on how to include the wp2.css into the SharePoint page only when the webpart is visible on the page, without me having to manually place the CSS file as mentioned in link 1.

Thank you in advance!

csssharepointweb-parts

Answer №1

  1. Make sure to include the Layouts mapped folder in your solution by following the steps outlined in this guide: Adding and Removing Mapped Folders.
  2. Within the mapped folder, create a folder structure that fits your needs (for example, /english/styles) and place the CSS file inside.
  3. Once you've built the WSP package, the CSS file will automatically be copied to the 
    [14 hive]\TEMPLATE\LAYOUTS\english\styles
    folder upon deployment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can anyone share tips on how to ensure that text placed over an image can adapt and respond effectively

I'm facing some difficulty in ensuring that my text remains responsive alongside the image it's paired with, especially on mobile view. This is how the module appears in desktop/tablet view: https://i.sstatic.net/85mik.jpg And here is its appe ...

htmlcsstwitter-bootstrapresponsive

When I forget to use var_dump, PHP fails to load scripts

When I am building CSS links using a function, the CSS doesn't work unless I add a var_dump at the end. What could I be missing or overlooking? Here is the code snippet: private function buildCssLinks(){ $files = $this->findFiles(dirname(d ...

phpcssclass

Positioning of the navigation menu

After customizing my Bootstrap navbar, I noticed that when the responsive size changes to mobile, the burger menu opens on the left side. Is there a way to move it to the right? Any help would be appreciated. Here is the HTML code: <!DOCTYPE html> ...

htmlcssbootstrap-4

Creating a Standard DIV Element (JavaScript Code)

Just a quick question here. http://jsfiddle.net/fkling/TpF24/ In this given example, I am looking to have < div>Bar 1</div> open as default... Any suggestions on achieving that? That would be all for now. Thank you so much! :D The JS script ...

javascriptcss

Erase the border around the color selection field

Here's a demonstration: http://jsfiddle.net/WpJRk/ I've incorporated a color picker into my webpage using the new input type "color": <input type="color"> However, I've noticed that there is an unwanted black border within the eleme ...

htmlcssgoogle-chrometwitter-bootstrap

What are some effective ways to align an image to the left and text to the right within a table

I need to display a member with a higher rank, showing the user image along with their username. However, I am struggling to align the image and text properly due to varying username lengths causing them to appear in a zig-zag position. Here is what I hav ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Unable to change Bootstrap variables within a Next.js project

I'm having trouble changing the primary color in Bootstrap within my NextJS project. I've tried different methods but nothing seems to work as expected. Here is the code snippet from my "globals.scss" file that I imported in "_app.js": $primary: ...

htmlcsstwitter-bootstrapsassnext.js

Clicking two times changes the background

I am facing an issue with three boxes on my website. Each box is associated with a corresponding div. When I click on any box, the div displays and the background color turns red. However, when I click on the same box again, the div disappears but the back ...

javascripthtmlcss

Achieving success by correctly reaching the window's edge during an event (onscroll)

This happens to be my 1st inquiry. Specifically, I have a navigation menu with a transparent background and I am attempting to alter the background once it reaches the top edge of the window. window.addEventListener("scroll", navSticky); function navSt ...

javascripthtmlcssonscroll

What is the process for setting up both an open and closed status for my accordion?

After browsing through multiple threads on accordions, none seem to match my current structure which I believed was effective. In an attempt to learn and build elements from scratch, I created the following accordion with some help from Google and experi ...

javascriptjquerycss

Customizing Column Background Color with AngularJS

https://i.sstatic.net/OHFFF.png My current webapp highlights the day of the week on a table for the current day and the day two weeks from now. However, I'm facing an issue with adjusting the highlight if either of these days falls on a holiday. Curr ...

javascripthtmlcssangularjsweb-applications

Tips for customizing the appearance of a jQuery sortable target list prior to dropping items

When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the p ...

javascriptjqueryhtmlcssjquery-ui-sortable

Changing the cursor while the onDrag event is active in ReactJs

I want to implement Drag functionality on certain elements in my application, but I am facing an issue where the cursor changes during dragging. How can I change the cursor specifically when onDrag is active? ...

javascriptcssreactjs

What causes the HTML element's X position value to double when its X position is updated after the drag release event in Angular's CDK drag-drop feature?

I am facing a challenge with an HTML element that has dual roles: Automatically moving to the positive x-level whenever an Obsarbalve emits a new value. Moving manually to both positive and negative x-levels by dragging and dropping it. The manual drag a ...

javascripthtmlcssangulardrag-and-drop

Modifying the color of text within an element using CSS and the ::after pseudo

Is there a way to change the text color when a user hovers over it without interfering with the background effect? I currently have a hover effect set to show a background section when hovering over the text, but when I try to change the text color separat ...

htmlcss

Unable to apply text decoration to a floating element

Why is text-decoration not applying to a span inside a div after floating the span, and how can this be fixed? To see the issue in action, visit: http://jsfiddle.net/wtBDX/2/ div { color: red; text-decoration: line-through; } div span { float: rig ...

htmlcsscss-floattext-decorations

The implementation of subnavbars within a navigation bar using HTML and CSS

I am looking to align the Login button with the settings icon on the same line above the links in my navbar. Is there a way to accomplish this? Check out this fiddle that demonstrates my issue: FIDDLE Here is the code I have written: <body> < ...

htmlcss

Bring div button on top of the contenteditable field

I am working on an Angular app for a client and need to implement a clickable button at the bottom right of a contenteditable element, similar to the image shown below : https://i.sstatic.net/J6XdW.png The challenge is that the content needs to be scroll ...

javascripthtmlcssangularjscontenteditable

Is there an issue with implementing autosuggestion and tagging functionalities in jQuery?

My script is designed to suggest values based on user input and then convert the selected value into a tag. However, when a value is selected from the drop down menu, only the first 2 or 3 characters are tagged. You can see the script in action on js fiddl ...

javascriptjqueryhtmlcssautocomplete

Experiencing an issue where the canvas element fails to render on mobile Chrome browser,

I've encountered an issue with a script that draws a canvas based on the background color of an image. The image is loaded dynamically from a database using PHP. The responsive functionality works fine on mobile Safari, but not on Chrome. When the re ...

javascriptjquerycsshtmlcanvas