사용자 지정 HTML 고급 서식 : 지원

Question

이 경우 내 홈페이지의 고급 HTML 서식과 관련하여 몇 가지 질문을하고 싶습니다.

내 문제에 대한 몇 가지 배경 : "줌라!"

I라는 콘텐츠 관리 시스템을 사용하고 있습니다 내 사이트를 관리 할 수 ​​있습니다.

여기 내 사이트에 건설중인 링크가 있습니다 ... Smart-Drones.

이 시점에서 나는 paint.net을 사용하여 웹 사이트가 기본적으로 "그리기"를 바라는 방식을 정확히 설계했습니다. 나는 다른 레이어에있는 모든 그래픽을 가지고 있으므로 PNG로 저장하고 웹 페이지에 삽입 할 수 있습니다.

을 (여기 참조하지만 제발 내 "< (10)의 명성"에 사진을 게시 할 수 있기 때문에 : http://forum.joomla.org/viewtopic.php?f=706&t=858845를)

방법 줌라를

기본적으로 이것은 내가 내 웹 사이트의 방문 페이지가보고 싶은 방법입니다! 콘텐츠 관리 시스템은 특정 위치에있는 모듈로 웹 사이트를 분할하여 작동합니다.

각 "위치"는 HTML로 포맷 할 수있는 공간이며 내 홈 페이지는 하나의 큰 HTML 모듈이므로 기본적으로 늪지 표준 HTML 페이지입니다.

첨부 된 이미지에서 방문 페이지에 큰 배경 이미지 (페이지의 프레이밍 제공)가 필요하다는 것을 알 수 있습니다. 배경 이미지는 PNG이며 피보나치 패턴과 페이지 중앙에 큰 그림이 있습니다.

해당 배경 이미지 위에 이미지, 단추 및 텍스트와 같은 요소를 오버레이하고 싶습니다. 또한 HTML 요소를 정확하게 배치 할 수 있기를 원합니다.

이미지 아래에 내가 요소를 배치해야하는지에 대한 아이디어 제공한다 : 나는 WYSIWYG 편집기를 사용하여 페이지를 공식화하기 위해 노력 해왔다

을 JCE (줌라 컨텐츠 편집기)라고하지만 운이없는되었다. 그냥 일하기를 거부하고 함께 변덕 스럽습니다!

div를 삽입 한 다음 배경 이미지를 추가하고 '절대 위치 지정'을 사용하여 해당 이미지 위에 요소를 배치하려고 시도했지만 가장 멀리있는 부분은 홈 페이지에서 볼 수있는 것입니다. :

은 ... 어떻게 일반적으로이 과정 가야합니까 ...

<div style="background-image: url('images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png'); background-repeat: no-repeat; background-position: center center; width: 799px; height: 906px; position: relative;"> <img style="position: absolute;" src="images/logo/Smart-Drone-4-logo.png" alt="Smart-Drone-4-logo" /><span class="h3" style="position: absolute;"><span class="h4" style="color: #ffffff; position: absolute;">INTRODUCING THE ALL <span style="color: #ffcc00;">NEW</span></span><span style="color: #ffab00;"><span class="h4"></span> </span> </span> 
</div> 

꽤 아니, 그래서 커뮤니티를 물어

WYSIWYG 에디터는이 코드를 생성 한? 그것은 꽤 표준 절차 여야하지만 내 검색은 실질적인 조언을 찾지 못했습니다.

도움이 될 수있는 자습서에 대한 조언이나 링크를 제공해 주시면 대단히 감사하겠습니다.

Jethro.

http://forum.joomla.org/viewtopic.php?f=706&t=858845

Answer 1

엠마누엘 바로 TinyMCE에의 사이트 레이아웃 편집 능력에 대해 기본적으로. 그러나 Joomla의 소형 MCE에는 서식 지정 용 단추가 통합되어 있습니다. 즉, 템플릿/css 폴더에있는 "editor.css"라는 파일을 통해 자신 만의 형식을 추가 할 수 있습니다. 거기에 정의 된 모든 클래스는 tinyMCE에 통합되어 있습니다. 따라서 tinyMCE를 통해 배경 이미지를 설정하려면 editor.css를 만들거나 편집하고 다음과 같이 추가하십시오.

editor.css 예 :

.my-background { 
    background-image: url('images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    width: 799px; 
    height: 906px; 
    position: relative; 
}